GlobalPay React-Native SDK 🛫

This SDK allows you to receive payments smoothly from your React-Native mobile app using GlobalPay.

Please follow the instructions below.

Installation

Since the SDK depends on native WebView and Toast notification libraries to function, you need to install it alongside its peer dependencies:

npm install globalpay-react-native-sdk react-native-webview react-native-toast-notifications

Note: For iOS, remember to install your CocoaPods after installing these packages (cd ios && pod install).

Usage

Import the library and pass in the required props to render the payment interface.

You must also import ToastProvider from react-native-toast-notifications and wrap your app with it:

import React from 'react';
import { GlobalPayRnSdk } from 'globalpay-react-native-sdk';
import { ToastProvider } from 'react-native-toast-notifications';

export default function App() {
  return (
    <ToastProvider placement="top">
      <GlobalPayRnSdk
        apiKey="YOUR_API_KEY_HERE"
        Amount={300}
        MerchantTransactionReference="UNIQUE_TRANSACTION_REF_123"
        RedirectUrl="https://yourwebsite.com/success"
        FirstName="Lisa"
        LastName="Jerry"
        Currency="NGN"
        EmailAddress="[email protected]"
        PhoneNumber="0812346677"
        paymentFormCustomFields={[
          { name: "Order ID", value: "ORD-1234" }
        ]}
        onSuccess={(response) => {
          console.log('Payment Successful', response);
        }}
        onFailure={(error) => {
          console.log('Payment Failed', error);
        }}
        onCancel={(message) => {
          console.log('User cancelled checkout', message);
        }}
      />
    </ToastProvider>
  );
}

Props Reference

| Prop | Type | Description | Required | | --- | --- | --- | --- | | apiKey | string | Your api key. | true | | Amount | number | The debit amount. | true | | MerchantTransactionReference | string | The unique merchant transaction reference. | true | | RedirectUrl | string | A redirect URL where we redirect your customers to after payment. | true | | FirstName | string | The customer's first name. | true | | LastName | string | The customer's last name. | true | | Currency | string | The currency e.g “NGN” or "USD" | true | | Enviroment | string | The work mode or enviroment e.g “test” or “live”. | true | | EmailAddress | string | The customer's email address. | true | | PhoneNumber | string | The customer's phone number. | true | | paymentFormCustomFields | Array<{name: string, value: string}> | Custom fields you want embedded into the transaction details. | true | | onSuccess | (response: any) => void | Invoked when a transaction is completely successful. | true | | onFailure | (error: any) => void | Invoked when a transaction fails. | true | | onCancel | (message: any) => void | Invoked when a user manually cancels the checkout. | true |