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()
tip

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.
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)
})