Reactnative – BudPay

React Native Library

This package enables you to integrate and accept payments in your React Native project using BudPay.

Installation

Add @budpay/react-native to your project by running:

npm install @budpay/react-native

yarn add @budpay/react-native

Install Required Dependency

To streamline the installation process, install and configure react-native-webview:

yarn add react-native-webview

For iOS:

cd iOS && pod install && cd ..

For Expo applications:

expo install react-native-webview

And that's it, you're all good to go!

Usage 1 - Auto Start

For opening the payment modal on autoStart:

import React from 'react';
import { BudPay } from '@budpay/react-native';
import { View } from 'react-native';
 
const Pay = () => {
  const handleCancel = (data) => {
    console.log(data, 'data');
  };
  
  const handleComplete = (data) => {
    console.log(data, 'data complete');
  };
  
  return (
    <View style={{ flex: 1 }}>
      <BudPay
        api_key="your budpay api_key" // you can get this in your budpay.com dashboard under API
        amount={'amount'} // in number
        currency="NGN"
        reference={'your trx reference'}
        email="your customer email"
        first_name="your customer first name"
        last_name="your customer last name"
        phone="your customer phone"
        onCancel={handleCancel}
        onComplete={handleComplete}
        autoStart={true}
      />
    </View>
  );
}
 
export default Pay;

Usage 2 - Using Refs

Make use of a ref to start transaction. This is useful if you need to use a button to start a transaction. See example below:

import { useRef } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { BudPay } from '@budpay/react-native';
import type { BudPayRef } from '@budpay/react-native';
 
const Pay = () => {
  // const reference = `BUD_${Date.now()}`; 
 
  const handleCancel = (data) => {
    console.log(data, 'data');
  };
  
  const handleComplete = (data) => {
    console.log(data, 'data complete');
  };
  
  const budpayRef = useRef<BudPayRef | null>(null);
 
  return (
    <View style={styles.container}>
      <BudPay
        api_key="your budpay api_key" // you can get this in your budpay.com dashboard under API
        amount={'amount'} // in number
        currency="NGN"
        reference={'your trx reference'}
        email="your customer email"
        first_name="your customer first name"
        last_name="your customer last name"
        phone="your customer phone"
        onCancel={handleCancel}
        onComplete={handleComplete}
        ref={budpayRef}
        autoStart={false}
      />
 
      <TouchableOpacity
        style={styles.payBtn}
        onPress={() => budpayRef.current?.startTransaction()}
      >
        <Text style={styles.txt}>Pay with BudPay</Text>
      </TouchableOpacity>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  payBtn: {
    padding: 16,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  txt: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 16,
  },
});
 
export default Pay;

Props

Prop	Type	Required	Description
`api_key`	`string`	Yes	Your BudPay API Key, e.g., `"pk_test_1234567890"`. You can get this in your budpay.com dashboard under API
`amount`	`number`	Yes	Amount to charge, e.g., `1000`
`currency`	`string`	Yes	Currency to charge in, e.g., `"NGN"`
`reference`	`string`	No	Unique reference for the transaction, e.g., `"BUD_1234567890"`
`email`	`string`	Yes	Customer email
`first_name`	`string`	Yes	Customer first name
`last_name`	`string`	Yes	Customer last name
`phone`	`string`	Yes	Customer phone
`callback_url`	`string`	No	URL to redirect to after payment, e.g., `"https://yourwebsite.com/callback"`
`onComplete`	`function`	No	Callback function to execute after payment is successful, e.g., `(response) => { console.log(response) }`
`onCancel`	`function`	No	Callback function to execute after payment is cancelled, e.g., `(response) => { console.log(response) }`
`activityIndicatorColor`	`string`	No	Loader color
`activityIndicatorSize`	`string`	No	Loader size, e.g., `"small"`, `"large"`
`debug`	`boolean`	No	Enables debug mode, e.g., `true`

React JS Vue JS