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

or

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 |