BudPay React V2 is a library for making payments using the BudPay payment gateway in React applications.

Installation

npm i budpay-react-v2

Usage

There are two methods of integrating BudPay React to your application

1. As Component
2. As Hook (Into your code directly)

Component

This component is a styled button that triggers the payment modal when clicked. You can pass in your BudPay configuration as props to the component, as shown below:

import { BudPayButton, closeBudPayPaymentModal } from 'budpay-react-v2';

const config = {
  api_key: 'sk_live_*******************', // Replace with your secret key
  reference: '', // Please replace with a reference you generated. or remove the line entirely so our API will generate one for you
  email: '[email protected]',
  amount: '100',
  first_name: 'Mary',
  last_name: 'Adams',
  currency: 'NGN', // Use GHS for Ghana Cedis or USD for US Dollars
};

const budPayConfig = {
  ...config,
  text: 'Pay with BudPay',
  btnSize: 'medium', // small, medium, large
  callback_url: '<https://marystore.com/>',
  callback: function (response) {
		closeBudPayPaymentModal();  // this will close the modal programmatically
    // this happens after the payment is completed successfully if callback_url is not provided
    alert('Payment complete! Reference: ' + response.reference + ', Status: ' + response.status);
  },
  onClose: function (response) {
    console.log(response);
    alert('Transaction was not completed, window closed.');
  },
};

function App() {
  return (
    <>
      <BudPayButton {...budPayConfig} />
    </>
  );
}

Into your code directly (As Hooks)

‘useBudPayPayment’ is a custom hook that returns a function that triggers the payment modal. You can use this hook in your components and pass the returned function to a button's onClick prop, as shown below:

import { useBudPayPayment, closeBudPayPaymentModal } from 'budpay-react-v2';

const config = {
  api_key: 'sk_live_*******************', // Replace with your secret key
	reference: '' // Please replace with a reference you generated. or remove the line entirely so our API will generate one for
  email: '[email protected]',
  amount: '100',
  first_name: 'Mary',
  last_name: 'Adams',
  currency: 'NGN', // Use GHS for Ghana Cedis or USD for US Dollars
};

const budPayConfig = {
  ...config,
  text: 'Pay with BudPay',
  callback_url: '<https://marystore.com/>',
  callback: function (response) {
		closeBudPayPaymentModal();  // this will close the modal programmatically
    // this happens after the payment is completed successfully
    alert('Payment complete! Reference: ' + response.reference + ', Status: ' + response.status);
  },
  onClose: function (response) {
    console.log(response);
    alert('Transaction was not completed, window closed.');
  },
};

const handleBudPayPayment = useBudPayPayment(budPayConfig);

function App() {
  return (
    <>
      <button onClick={handleSkrapePayment}>Pay with BudPay</button>
    </>
  );
}

Parameters

To initialise 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: