BudPay Inline (Pop up)

BudPay Inline offers the simplest way to integrate secure payments into your website. Here's a quick overview:

1. Add BudPay JS Library: Include the lightweight BudPay JavaScript library on your checkout page.
2. Connect to Payment Button: Call the BudPayCheckout() function when the customers click on your payment button to trigger the BudPay Inline flow.
3. We Handle the Payment: BudPay takes over securely, processing the transaction.
4. Seamless Return: Upon successful payment, BudPay redirects the customer back to your website with reference and status attached to your callback url (if provided), and if callback url is not provided, it calls the callback function with status and reference as its arguements.

See demo of the BudPay Inline (Pop up) on the checkout here (opens in a new tab).

This example demonstrates how BudPay Inline might be implemented on a basic checkout page:

Let's delve into the first step of the BudPay Inline implementation:

• First, you include the BudPay Inline library with a script tag:

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

• Next, attach an onclick event handler to the payment button, inside the onclick event handler, call a JavaScript function you'll create to handle the payment logic. Here, we're using a placeholder named payWithBudPay().

  <button onclick="payWithBudPay()">Pay with BudPay</button>

• Now that we've covered the script inclusion and payment button, let's delve into the core functionality: initiating the payment process.

  function payWithBudPay() {
      BudPayCheckout({
          key: 'pk_test_xolsnu5dpqpia2a7a8iftygugzyluz2qffkhlid', // Replace with your public key
          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
          email: 'maryjoe@gmail.com', // 
          amount: '1000',
          first_name: 'Mary',
          last_name: 'Joe',
          currency: 'NGN', // Use GHS for Ghana Cedis, KES for Kenyan Shilings, USD for US Dollars
          callback_url: '' // URL to which BudPay redirects after the transaction is completed
          callback: function(response) {
              // this happens after the payment is completed successfully
              let reference = response.reference;
              let status = response.status;
              console.log('Payment Complete', response);
              alert('Payment complete! Reference: ' + reference + ', Status: ' + status);
          },
          onClose: function (response) {
              // this happens when the payment is cancelled
              let reference = response.reference;
              let status = response.status
              console.log('Transaction was not completed', response);
              alert('Transaction was not completed, window closed.');
          },
      });
  }

Let's delve down, here's a breakdown of the configurations within the provided integration code for the BudPayCheckout function:

BudPay Checkout Configuration

Important Notes:

1. The key is your BudPay public key, which you can find in your BudPay dashboard.
2. The reference is optional, but it's recommended you generate a unique reference from your system for each transaction to track it easily, and avoid conflicts with other transactions, else BudPay will generate one for you.
3. The email, amount, first_name, last_name, and currency are required fields.
4. The callback_url is optional, but it's recommended to provide it to ensure a seamless return to your website after the transaction is completed. The reference and status will be added as query parameters to the URL (e.g., https://yoursite.com/callback?reference=REF_123&status=success).
5. The callback function is required to handle the successful payment response, if the callback_url is not provided.
6. The onClose function is required to handle the closure of the payment window without completing the transaction.