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