The "Like" button evolved.

Clappy Button is a web component for payments that can be embedded on any webpage.

Install via NPM:

npm install clappy-button

JS:

import 'clappy-button'

HTML:

<clappy-button
  amountperclap="0.01"
  amountmax="0.10"
  currencycode="USD"
  currencySymbol="$"
  theme="light"
  instanceid="post-id-1"
></clappy-button>

• amountperclap - Each time user claps, total amount will be incremented by this value e.g. "0.01"
• amountmax - set equal to the user's current spendable balance.
• currencycode / currencysymbol
  • if currencycode is specified, it will be used as a suffix in the counter e.g. 1 USD
  • if currencysymbol is specified, it will be used as a prefix in the counter e.g. $1
• theme - "light" and "dark" are the current built-in themes. Alternatively, you can create your own.
• instanceid - Unique identifier if using multiple clappy buttons on the same page e.g. post-id-1

Attributes are case sensitive and must be defined in all lowercase e.g. instanceid is valid, instanceId is invalid.

Communication between your app and Clappy Button is made via Window message events.

Window Message Events emitted from Clappy Button to listen for in your app:

• loading - Sent when user is finished clapping. Use this event to trigger the payment with the amount. eventData includes instanceId and amount.

Window Message Events to emit from your app to control Clappy Button animations:

• success - Triggers success animation
• fail - Triggers fail animation

import { useEffect } from 'react'
import 'clappy-button'

function App() {

  async function confirmPayment(amount) {
    confirm(amount)
      .then(result => {
        window.postMessage({ app: 'clappy-button', event: 'success', instanceId: 'cb1' })
      })
      .catch(error => {
        window.postMessage({ app: 'clappy-button', event: 'fail', instanceId: 'cb1' })
      })
  }

  function handleWindowMessage(message) {
    if (message.data.app === 'clappy-button' && message.data.event === 'loading' && message.data.instanceId === 'cb1') {
      confirmPayment(message.data.eventData.amount)
    }
  };
  useEffect(() => {
    window.addEventListener("message", handleWindowMessage);
    return () => window.removeEventListener('message', handleWindowMessage);
  }, [])
  
  return (
    <div style={{ marginTop: '75px' }}>
      <clappy-button instanceid="cb1" currencysymbol="$" amountperclap="0.01"></clappy-button>
    </div>
  );
}

Custom theme can be specified using css:

  clappy-button::part(custom-theme) {
    --background: #e6e6e6;
    --counter-background: #000;
    --counter-label: #fff;
    --confetti-primary: #2599ff;
    --confetti-secondary: #fdcb01;
    --hand: #000;
    --loading: #ababab;
    --loading-background: white;
    --success: #4bb543;
    --fail: #fc100d;
    --button-border: transparent;
  }

Feature requests, issues and pull requests are welcome.

MIT License. See LICENSE.md for details.

remjx - twitter | website

coindrop.to/clappy-button << Also built by remjx :)

@clappybutton on Twitter