@budpay/react-native v0.1.1

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