@pay-elements/buttons NPM

🏠 Homepage

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

Install

The <pay-button> web component can be installed from NPM:

npm install @pay-elements/buttons

It can also be used directly from various free CDNs such as unpkg.com:

<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!

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, you’re all set - you’ll only upgrade when you run npm update.

If you’re using 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.

<!-- 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 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!'

  <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.

      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

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

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