React Native BudPay

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, let's go ahead and install and configure a necessary dependency for this project, react-native-webview.

run

yarn add react-native-webview

for iOS: cd iOS && pod install && cd ..

for expo applications run;

expo install react-native-webview

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

Usage 1

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: any) => {
    console.log(data, 'data');
  };
  const handleComplete = (data: any) => {
    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>
  );
}

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: any) => {
     console.log(data, 'data');
  };
  const handleComplete = (data: any) => {
     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>
  );
}

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`

BudPay