Vanilla JS

Integrate Bani payment widget using pure JavaScript

When you have all the details needed to initiate the transaction, the next step is to tie them to the JavaScript function that passes them to Bani and displays the Bani Pop Widget.

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 unique  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   
}

Important notes

1. The merchantKey field here takes your Bani public key.

2. The amount field holds the total amount to pay.

3. The merchantRef field is a custom unique reference passed by the merchant. This is optional

4. The callback method is called when payment has been completed. See here for more information.

5. The onClose method is called if the user closes the widget. See here for more information.

6. It’s recommended to make use of the webhook notifications to verify all incoming payments. You can however verify payment status via API. See here for more information

If you need integrate payment collection via API, you can find API integration details here.