Inline (Popup)
BudPay Popup provides a simple and convenient payment flow for web. It can be integrated in five easy steps, making it the easiest way to start accepting payments.
HTML
<form id="paymentForm">
<input class="form-control" type="text" id="email" name="email" placeholder="E-mail Address" required>
<input class="form-control" type="text" id="first_name" name="first_name" placeholder="First Name">
<input class="form-control" type="text" id="last_name" name="last_name" placeholder="Last Name">
<input class="form-control" type="text" id="phone" name="last_name" placeholder="Phone">
<input class="form-control" type="tel" id="amount" name="amount" placeholder="Amount" required>
<div class="form-button">
<button type="submit" onclick="payWithBudPay()" class="ibtn ibtn-full">Pay</button>
</div>
</form>
<script src="https://inlinepay.budpay.com/budpay-inline-custom.js"></script>
JavaScript
const paymentForm = document.getElementById('paymentForm');
paymentForm.addEventListener("submit", payWithBudPay, false);
function payWithBudPay(e) {
e.preventDefault();
BudPayCheckout({
key: 'pk_test_xolsnu5dpqpia2a7a8iftygugzyluz2qffkhlid', // Replace with your public key
email: document.getElementById('email').value,
amount: document.getElementById('amount').value,
first_name: document.getElementById('first_name').value,
last_name: document.getElementById('last_name').value,
currency: 'NGN', // Use GHS for Ghana Cedis or USD for US Dollars
reference: '' + Math.floor((Math.random() * 100000000000) + 1) + new Date().getSeconds() + new Date().getMilliseconds(), // generates a pseudo-unique reference. Please replace with a reference you generated. or remove the line entirely so our API will generate one for you
callback: function(response) {
//this happens after the payment is completed successfully
var reference = response.reference;
alert('Payment complete! Reference: ' + reference + ', Status: ' + response.status);
},
onClose: function (response) {
console.log(response);
alert('Transaction was not completed, window closed.');
},
custom_fields: {
tax_pay_transaction: "",
tax_pay_type: "",
agency_code: "",
revenue_code: "",
revenue_credit_acc: "",
cbn_code: "",
}
});
}
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? | Decription |
|---|---|---|---|
| key | string | Yes | Your public key from BudPay. Use test key for test mode and live key for live mode |
| 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. |
| reference | string | No | Unique case sensitive transaction reference |
| logo_url | string | No | Payment popup custom logo url |
| callback_url | string | No | Custom callback url, if not set in your account settings or want a unique callback url for the payment |