Reactnative – BudPay

React Native Library

The BudPay React Native Library lets you accept payments in iOS and Android apps built with React Native. The payment modal runs in a WebView, so customers pay without leaving your app.

Installation

Install @budpay/react-native with npm or yarn:

npm install @budpay/react-native

yarn add @budpay/react-native

Install the WebView Dependency

The library depends on react-native-webview. Install it in your project:

yarn add react-native-webview

For iOS:

cd ios && pod install && cd ..

For Expo applications:

expo install react-native-webview

Usage: Open Automatically

Set autoStart to true to open the payment modal as soon as the component mounts:

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="pk_test_xxxxxxxx" // Your BudPay public key, from Settings > API Credentials in your dashboard
        amount={1000}
        currency="NGN"
        reference={`ORDER_${Date.now()}`} // A unique reference from your system
        email="customer@example.com"
        first_name="Ada"
        last_name="Okafor"
        phone="08012345678"
        onCancel={handleCancel}
        onComplete={handleComplete}
        autoStart={true}
      />
    </View>
  );
}
 
export default Pay;

Usage: Open From a Button

To open the modal on demand, attach a ref to the component and call startTransaction(), for example from your own pay button:

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 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="pk_test_xxxxxxxx" // Your BudPay public key, from Settings > API Credentials in your dashboard
        amount={1000}
        currency="NGN"
        reference={`ORDER_${Date.now()}`} // A unique reference from your system
        email="customer@example.com"
        first_name="Ada"
        last_name="Okafor"
        phone="08012345678"
        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 public key, e.g. `"pk_test_1234567890"`. Find it in your dashboard under Settings > API Credentials.
`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`

The onComplete and onCancel callbacks only tell you the modal has closed. Always verify the transaction on your server with the reference before giving value to the customer.

React JS Vue JS