Charge UI Documentation


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


This approach enables a cryptocurrency payment button with an interactive payment modal.

# Installation

Simply include the following assets in your markup:

<!DOCTYPE html>
    <title>Charge UI</title>


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:

    class="coinpush cp-button"
    Pay with Cryptocurrency

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:


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:

Payment statuses
Status Description
balance_insufficient Funds were received at the deposit address, but did not reach the expected amount.

Funds were received at the deposit address and reached the expected amount.

Check for this status if you do not care for confirmations.


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.


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.on('balance_sufficient_confirmed', (status, charge) => {
    // Disable the charge button.
    charge.button.disabled = true

    // Show payment accepted screen with additional message.

    // Stop listening for the charge's payment statuses.

    // 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)