Payment Button
Accepting payments on websites
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;
Fields | Description |
---|---|
publicKey | Your bitnob public key |
amount | The payment amount in the specified currency |
currency | local currency of business |
reference | A unique reference for transaction |
customerEmail | Customer email is used for transaction tracking and also to send transaction receipt |
notificationEmail | Business email used to receive transaction information and receipt |
callbackUrl | Business callback URL to receive webhook events |
successUrl | Business 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.

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 about 1 year ago