Vue JS Library
Integrate BudPay payments into your Vue.js applications with ease.
Step 1: Add The BudPay CDN
Add the BudPay Inline library to your HTML page:
<script src="https://inlinepay.budpay.com/budpay-inline-custom.js"></script>Step 2: Define the JavaScript Function
function payWithBudPay() {
BudPayCheckout({
key: 'pk_test_xolsnu5dpqpia2a7a8iftygugzyluz2qffkhlid', // Replace with your public key
email: 'kayode@mail.com',
amount: 100,
first_name: 'Kayode',
last_name: 'Adetunji',
currency: 'NGN', // USD, GBP, KES, GHS
reference: '' + Math.floor((Math.random() * 100000000000) + 1) + new Date().getSeconds() + new Date().getMilliseconds(), // If not defined, our system will generate one for you
callback: function(response) {
// this happens after the payment is completed successfully
var reference = response.reference;
console.log(response);
// Define what action you want to trigger on payment successful close
},
onClose: function (response) {
console.log(response);
// Define what action you want to trigger on modal close
}
});
}Step 3: Create a Vue JS Component
Vue Button To Trigger Payment:
<template>
<button @click="initiateBudPayModal">Pay With BudPay</button>
</template>Vue Code To Trigger Payment Function:
export default {
methods: {
initiateBudPayModal() {
payWithBudPay(); // Call the JavaScript function you created earlier
}
}
};Complete Vue Code
<template>
<button @click="initiateBudPayModal">Pay With BudPay</button>
</template>
<script>
import Vue from 'vue';
export default {
methods: {
initiateBudPayModal() {
payWithBudPay();
}
}
};
</script>Parameters
To initialize the transaction, you'll need to pass information such as email, first name, last name, amount, transaction reference, etc. Email and amount are required. You can also pass any other additional information such as logo_url and callback_url object field. Here is the full list of parameters you can pass:
| Param | Type | Required? | Description |
|---|---|---|---|
key | string | Yes | Your public key from BudPay. Use test key for test mode and live key for live mode |
email | string | Yes | Customer email address |
amount | string | Yes | Amount to pay |
first_name | string | No | Customer first name |
last_name | string | No | Customer last name |
currency | string | Yes | Currency charge should be performed in (NGN, USD, GBP, KES, GHS) |
reference | string | No | Unique case sensitive transaction reference |
callback | function | No | Function called on successful payment |
onClose | function | No | Function called when payment window is closed |
callback_url | string | No | URL to redirect to after payment |
logo_url | string | No | URL to your logo |