Clappy Button
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
- if
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
includesinstanceId
andamount
.
Window Message Events to emit from your app to control Clappy Button animations:
success
- Triggers success animationfail
- 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
Donations
coindrop.to/clappy-button << Also built by remjx :)