Vuejs – BudPay

Vue JS Library

Accept payments in your Vue.js application through the BudPay payment modal. The integration uses the BudPay Inline library, so you only need a script tag and a component method that opens the modal.

Step 1: Add the BudPay Script

Add the BudPay Inline library to your index.html:

<script src="https://inlinepay.budpay.com/budpay-inline-custom.js"></script>

Step 2: Create the Payment Function

Define a function that calls BudPayCheckout with your public key and the transaction details:

function payWithBudPay() {
    BudPayCheckout({
        key: 'pk_test_xolsnu5dpqpia2a7a8iftygugzyluz2qffkhlid', // Replace with your public key
        email: 'customer@example.com',
        amount: '1000',
        first_name: 'Ada',
        last_name: 'Okafor',
        currency: 'NGN', // NGN, GHS, KES or USD
        reference: 'ORDER_' + Date.now(), // Replace with a unique reference from your system, or remove to let BudPay generate one
        callback: function (response) {
            // Called when the payment modal closes after a payment attempt
            console.log('Payment complete', response.reference, response.status);
        },
        onClose: function (response) {
            // Called when the customer closes the modal without paying
            console.log('Payment cancelled', response.reference, response.status);
        }
    });
}

Step 3: Open the Modal From a Component

Call the payment function from a component method:

<template>
    <button @click="initiateBudPayModal">Pay with BudPay</button>
</template>
 
<script>
export default {
    methods: {
        initiateBudPayModal() {
            payWithBudPay(); // The function defined in Step 2
        }
    }
};
</script>

Parameters

Parameter	Type	Required	Description
`key`	`string`	Yes	Your BudPay public key. Use a `pk_test_` key in test mode and a `pk_live_` key in live mode.
`email`	`string`	Yes	Customer's email address.
`amount`	`string`	Yes	Amount to charge.
`currency`	`string`	Yes	Currency code: `NGN`, `GHS`, `KES` or `USD`.
`reference`	`string`	No	Unique, case-sensitive transaction reference. BudPay generates one if you leave it out.
`first_name`	`string`	No	Customer's first name.
`last_name`	`string`	No	Customer's last name.
`phone`	`string`	No	Customer's phone number.
`callback_url`	`string`	No	URL to redirect the customer to after payment. `reference` and `status` are added as query parameters.
`callback`	`function`	No	Called after a payment attempt when no `callback_url` is set. Receives an object with `reference` and `status`.
`onClose`	`function`	No	Called when the customer closes the modal without paying. Receives an object with `reference` and `status`.

The callback and redirect only tell you the modal has closed. Always verify the transaction on your server with the reference before giving value to the customer.

To keep the amount and customer details out of the browser, initialize the transaction on your server and open the modal with BudPayCheckoutWithAccessCode. See Checkout with Access Code.

React Native Webhooks