npm package: @pay-elements/buttons
Description: [![NPM](https://img.shields.io/npm/v/@pay-elements/buttons)](https://www.npmjs.com/package/@pay-elements/buttons) ### 🏠 [Homepage](https://turinpay.com) TurinPay provides a powerful web component (button) that supports bitcoin lightning network and stand
Latest version: 1.1.2

 [![NPM](https://img.shields.io/npm/v/@pay-elements/buttons)](https://www.npmjs.com/package/@pay-elements/buttons)
### 🏠 [Homepage](https://turinpay.com)
TurinPay provides a powerful web component (button) that supports bitcoin lightning network and standard on-chain operations with action events associated allowing you to receive and send microtransactions instantly.


### ✨ [Demo](https://beta.turinpay.com/)

## Install

The `<pay-button>` web component can be installed from [NPM](https://npmjs.org):

```sh
npm install @pay-elements/buttons
```

It can also be used directly from various free CDNs such as [unpkg.com](https://unpkg.com):

```html
<script type="module" src="https://unpkg.com/@pay-elements/buttons@[latest|version]/dist/pay.js"></script>
```

For more detailed usage documentation and live examples, please visit our docs
at [docs.turinpay.com](https://docs.turinpay.com)!

### Important note about versions
Our goal for `<pay-button>` is to be a consistent, stable part of your web
platform while continuing to deliver cutting-edge features. We’ll always try
to minimize breaking changes, and to keep the component backwards compatible.

For your production site you may want the extra stability that comes by
pinning to a specific version, and upgrading on your own schedule (after
testing).

If you’ve installed via [NPM](https://npmjs.org), you’re all set - you’ll only
upgrade when you run [`npm update`](https://docs.npmjs.com/cli/update.html).

If you’re using [unpkg.com](https://unpkg.com), you can pin to a specific
version by specifying it in the URL. Replace the `<version>` tag in the sample
below with the full version number (like `1.0.0`) to be pinned to.

```html
<!-- Loads <pay-button> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@pay-elements/buttons@[latest|version]/dist/pay.js">
</script>
```

## How to use the imported html tag?

Simply by using the <pay-button> tag with the properly configured properties.

The configurable properties are:

* checkoutId: **Required** the identifier registered on the platform that identifies the payment intent
* testnet: Flag for testnet environment
* paidText: Text to show when payment intent is sucess. Default 'Success!'

```html
  <pay-button
    checkoutId="<uuid>"
    testnet
    paidText='¡Paid 🚀!'
  />
```

## Button Customization (CSS)

You can customize the look of the button by assigning values to the CSS variables.

```css
      button {
        font-size: var( --pb-button-size, 1rem );
        font-weight: var( --pb-button-weight, 400 );
        background-color: var( --pb-button-background, transparent );
        color: var( --pb-button-color, #19d3ae );
        border: var( --pb-button-border, 2px solid #19d3ae );
        border-radius: var( --pb-button-border-radius, 0.7em );
        padding: var( --pb-button-padding, 0.3em 2em );
        width: var( --pb-button-width, auto );
        height: var( --pb-button-height, auto );
        transition: all 0.2s ease-out;
        cursor: pointer;
      }
      button:hover {
        font-size: var( --pb-button-hover-size, 1rem );
        font-weight: var( --pb-button-hover-weight, 400 );
        background-color: var( --pb-button-hover-background, #f0f0f0 );
        color: var( --pb-button-hover-color, #fff );
      }
```

## Frontend event

By listening to the `paid` event you can schedule actions, while the purchase is confirmed through an IPN from server

```js
  (function () {
    var elem = document.querySelector('pay-button');

    elem.addEventListener('paid', function (elem) {
        // Layout changes...?
    }, false);
  })()
```

## Browser Support

`<pay-button>` is supported on the last 2 major versions of all evergreen
desktop and mobile browsers. `<pay-button>` is also supported on IE11.

|               | <img src="https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_32x32.png" width="16"> Chrome | <img src="https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_32x32.png" width="16"> Firefox | <img src="https://github.com/alrra/browser-logos/raw/master/src/safari/safari_32x32.png" width="16"> Safari | <img src="https://github.com/alrra/browser-logos/raw/master/src/edge/edge_32x32.png" width="16"> Edge | <img src="https://github.com/alrra/browser-logos/raw/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_32x32.png" width="16"> IE11 |
| -------- | --- | --- | --- | --- | --- |
| Desktop  | ✅  | ✅  | ✅  | ✅  | ✅  |
| Mobile   | ✅  | ✅  | ✅  | ✅  | N/A |

## Author

👤 **@PAY-ELEMENTS**

* Website: https://turinpay.com
* Docs: https://docs.turinpay.com

## 📝 License

Copyright © 2020 [TURINPAY](https://turinpay.com).<br />