Home

Payment Button

Accepting payments on websites

Suggest Edits

You can facilitate payment on your site and receive payment globally using our API, our JS script, SDKs or WordPress and Wix plugins.

Embedding a payment button connected to the API via these means generates a payment checkout popup and allows customers to scan the QR code to make payment on any crypto wallet available to them.

Getting Transaction Info

To generate a payment request, customer and transaction information is needed;

FieldsDescription
publicKeyYour bitnob public key
amountThe payment amount in the specified currency
currencylocal currency of business
referenceA unique reference for transaction
customerEmailCustomer email is used for transaction tracking and also to send transaction receipt
notificationEmailBusiness email used to receive transaction information and receipt
callbackUrlBusiness callback URL to receive webhook events
successUrlBusiness redirect URL for customers after successful payment

Generating Checkout

After collecting customer and transaction infomation;

<!DOCTYPE html>
<html>

<head>
    <title>Pay with Bitnob</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    <script src="https://www.js.bitnob.co/v1/inline.js"></script>
    <script src="index.js"></script>
</head>

<body>

    <div class="container">
        <h1 style="padding: 5px;">Internal Test Inline Checkout</h1>
        <form onsubmit="getFormData(event)" class="form-container">
            <div>
                <div class="input-div">
                    <label for="email"><b>Email</b></label>
                    <input type="text" placeholder="Enter Email" name="email" id="email" required>
                </div>
                <div class="input-div">
                    <label for="amount"><b>Amount</b></label>
                    <input type="number" placeholder="Enter amount in Naira" name="amount" id="amount" required>
                </div>
                <div class="button-div">
                    <button type="submit" id="button-pay" class="bitnob-button">
                        <div class="img"></div>
                        <p>Pay With Bitnob</p>
                    </button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

function setReference() {
    let text = "";
    let possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (let i = 0; i < 10; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

function pay(publicKey, amount, customerEmail, reference) {
    var data = {
        publicKey: publicKey,
        amount: amount,
        customerEmail: customerEmail,
        notificationEmail: '[email protected]',
        description: "pay me my money",
        currency: "NGN",
        reference: reference,
        callbackUrl: "https://webhook.site/75540088-1ce4-4dbd-963b-2aba6dfa498e",
        successUrl: "https://google.com",

    };
    window.initializePayment(data, "sandbox");
}

function getFormData(e) {
    e.preventDefault();
    var email = document.getElementById('email').value;
    var amount = document.getElementById('amount').value;
    var reference = setReference();
    pay('pk.9058f.0a5cb70de0f5853b9febfa',
        amount,
        email,
        reference
    );
}

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.bitnob-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:
  #031735;
  color: #ffffff;
  border: none;
  padding: 10px 30px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
}

.img {
  width: 20px;
  background-image: url("https://res.cloudinary.com/gabbyprecious/image/upload/v1650746449/cad8exitdhnparfqyfjf.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 20px;
}

body {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  padding: 3rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  /* height: 100%;
  width: 100%; */
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 400px;
}

.form-container div {
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.form-container input {
  border: 1px solid black;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 10px;
  width: 75%;

}

.input-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Checkout Pop Up

After a checkout has been created using the button, it generates a pop up on the website without redirecting the user to another site. The payment checkout is consist of a bip21 QR that has both a lightning and on-chain address added to it. It also has then displayed so users can copy them.

1334

📘

Minimum on-chain Amount

Onchain addresses are only generated for payments above $5. Payments less than $5 will only generate a lightning invoice.

Callback

After successful payment of a checkout payment, a webhook event is sent. Either checkout.received.paid for full payment or checkout.received.underpaid or partial payment. This event can be used to change the status of a payment order on your platform or credit a customer's account.

🚧

Verification of Webhooks

All webhook events should be verified to ensure that these webhooks are from Bitnob before performing any action.

Redirect to Success URL

When creating a checkout, a successUrl, after successful payment, Bitnob redirects users back to your site, using the set successUrl. A successUrl should always be set so as to allow the user to continue the transaction on your platform.

Updated 9 months ago