Skip to content

remjx/clappy-button-web-component

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Clappy Button

Clappy Button Logo

The "Like" button evolved.

Demo

Introduction

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

Installation

Install via NPM:

npm install clappy-button

Usage

JS:

import 'clappy-button'

HTML:

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

Parameters

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

Events

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

Framework Implementation Examples

React

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

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;
  }

Contribute

Feature requests, issues and pull requests are welcome.

License

MIT License. See LICENSE.md for details.

Maintainers

remjx - twitter | website

Donations

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

Follow

@clappybutton on Twitter