Quick Start

Get your API keys

Sign in to your Bani merchant account to get your API keys. You will need your public key to initiate the Bani Pop Payment Widget.

You can generate an API key from your Dashboard at any time.

Getting started

To initialise the transaction, you'll need to pass information such as phone number, email, first name, last name, amount etc. Amount, phone number, email, first name, last name, and merchant public key are required. You can also pass any other additional information in the metadata object field and custom reference. Here is the full list of fields you can pass:

Fields	Required?	Description
merchantKey	Yes	Your merchant public key from Bani. Use test key for test mode and live key for live mode
amount	Yes	Amount to pay
phoneNumber	Yes	The mobile number of the customer. Should be in international format i.e [phone]
email	Yes	The email address of the customer
firstName	Yes	The first name of the customer
lastName	Yes	The last name of the customer
merchantRef	No	Unique case sensitive custom transaction reference. Only -,., =and alphanumeric characters allowed
metadata	No	Object containing any extra information you want recorded with the transaction. This will be added in the payment event sent via webhooks

In the sample below, notice how:

1. The Bani Pop javascript is included using a script tag. This is how you import Bani Pop Widget into your code.

2. The amount here can be hardcoded if you want to charge a specific amount.

3. The Pay button has been tied to an onClick function called payWithBani. This is the action that causes the Bani Pop Widget to load.

HTML

<form id="paymentForm">
    <div class="form-group" style="margin-bottom: 10px;">
        <label for="phone-number">Phone Number</label>
        <input type="tel" id="phone-number" required />
    </div>
    <div class="form-group" style="margin-bottom: 10px;">
        <label for="email">Email</label>
        <input type="email" id="email" required />
    </div>
    <div class="form-group" style="margin-bottom: 10px;">
        <label for="amount">Amount</label>
        <input type="number" id="amount" required />
    </div>
    <div class="form-group" style="margin-bottom: 10px;">
        <label for="first-name">First Name</label>
        <input type="text" id="first-name" />
    </div>
    <div class="form-group" style="margin-bottom: 10px;">
        <label for="last-name">Last Name</label>
        <input type="text" id="last-name" />
    </div>
    <div class="form-submit">
      <button type="submit"> Pay </button>
    </div>
</form>
<!-- JS -->
<script src="https://bani-assets.s3.eu-west-2.amazonaws.com/static/widget/js/window.js" async></script>

JavaScript

const paymentForm = document.getElementById('paymentForm');
paymentForm.addEventListener('submit',(e)=> payWithBani(e), false);

function payWithBani (e) {
    e.preventDefault()

    let handler = BaniPopUp({
        amount: document.getElementById('amount').value, //The amount the customer wants to pay
        phoneNumber: document.getElementById('phone-number').value, //The mobile number of the customer in int format i.e [phone]
        email: document.getElementById('email').value, //The email of the customer
        firstName: document.getElementById('first-name').value, //The first name of the customer
        lastName: document.getElementById('last-name').value, //The last name of the customer
        merchantKey: "pub_test_EGB9QD8TQPV0ZD", //The merchant Bani public key
        metadata: "", //Custom JSON object passed by the merchant. This is optional
        merchantRef: "", //Custom payment reference passed by the merchant. This is optional
        onClose: (response) => {
            console.log("ONCLOSE DATA",response)
        },
        callback: function (response) {
            let message = 'Payment complete! Reference: ' + response?.reference
            console.log(message, response)
        }
    })
    handler   
}