Charge UI Documentation
Basics
Everything you need to know to get started.
# Introduction
The Charge UI plugin enables a cryptocurrency payment button with an interactive payment modal in your web applications.
It is initialised with charge tokens generated via the Coinpush API, or any of its supported SDKs.
# Example
Here's an example of the payment button and its interactive modal:
The payment modal instructs the user to make a payment and informs them once it's processed.
# Browser Support
The plugin is supported in all modern browsers:
- Chrome >= 51
- Firefox >= 54
- Safari >= 10
- Opera >= 38
- Edge >= 12
Approach
This approach enables a cryptocurrency payment button with an interactive payment modal.
# Installation
Simply include the following assets in your markup:
<!DOCTYPE html>
<html>
<head>
<title>Charge UI</title>
<link
rel="stylesheet"
type="text/css"
href="https://coinpush.io/a/styles/charge-ui.css">
</head>
<body>
<script
src="https://coinpush.io/a/scripts/charge-ui.js">
</script>
</body>
</html>
Want to host the code yourself? No problem. Download and include the public assets found in the official GitHub Repository.
# Initialisation
Generate a new charge_token on the server. You can use the Coinpush API or a SDK to create one. Reference it in the data-token attribute of a button:
<button
class="coinpush cp-button"
data-token="CHARGE_TOKEN_GENERATED_ON_THE_SERVER">
Pay with Cryptocurrency
</button>
Create a new CoinpushCharge instance and inject the button elements by their class name:
let buttons = document.getElementsByClassName('coinpush')
const coinpush = new CoinpushCharge(buttons)
You're now accepting payments! Use Events to monitor charges.
# Testnet
Want to use Charge UI with the Testnet? Enable Testnet requests like so:
coinpush.requester.useTestnet()
Please do not send real payments to any addresses created on the Testnet - our systems will not detect them.
# Events
To monitor a charge you must listen for payment statuses. Let's review the available statuses you can listen for:
Status | Description |
---|---|
balance_insufficient | Funds were received at the deposit address, but did not reach the expected amount. |
balance_sufficient | Funds were received at the deposit address and reached the expected amount. Check for this status if you do not care for confirmations. |
balance_sufficient_confirmed | Funds are sufficient and have at least one confirmation. One confirmation takes between 2-15 minutes, depending on the network type and load. Check for this status if you require stronger payment security. |
output_completed | Funds were forwarded to your output address. Happens shortly after the payment confirms. |
Here's how to listen for payment statuses:
coinpush.on('balance_sufficient', (status, charge) => {
// Do whatever...
})
An example on how to handle events. Here, we wait for one confirmation before redirecting to a "thank-you" page:
coinpush.on('balance_sufficient', (status, charge) => {
coinpush.modal.showAwaitingConfirmation()
})
coinpush.on('balance_sufficient_confirmed', (status, charge) => {
// Disable the charge button.
charge.button.disabled = true
// Show payment accepted screen with additional message.
coinpush.modal.showPaymentAccepted('Redirecting...')
// Stop listening for the charge's payment statuses.
coinpush.stopListening(charge.button.dataset.token)
// Redirect the user to verify the payment on the server.
// TIP: Make sure you created the charge token.
// TIP: Ensure the charge token cannot be used again.
setInterval(() => {
window.location.href = '/thank-you?token=' + token
}, 3000)
})