Initiate transaction

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.

5. The onClose method is called if the user closes the widget.

If you need a React package to handle this, kindly download the package here.