omnipay-reactnative-sdk

Omnipay react native sdk

Installation

yarn add omnipay-reactnative-sdk

Dependencies

yarn add react-native-select-contact react-native-webview react-native-share

Make sure your manifest files includes permission to read contacts

<uses-permission android:name="android.permission.READ_CONTACTS" />

Also add this for Android 11+ support below the application tag in your AndroidManifest.xml file

<application>
......
</application>
<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:mimeType="vnd.android.cursor.dir/contact" />
    </intent>
</queries>

If using CocoaPods, in the ios/ run:

pod install

Please make sure AndroidX is enabled in your project by editting android/gradle.properties and adding 2 lines:

android.useAndroidX=true
android.enableJetifier=true

Usage

// usage with useOmnipay hook
import { OmnipayProvider, useOmnipay } from 'omnipay-reactnative-sdk';

// Wrap your parent component with OmnipayProvider like below
<OmnipayProvider
  publicKey="OMNIPUBKEY_HZA3ERGYEE5XUFGTZDQV_MNKRSTA3-TU"
  env="dev"
  color="red"
>
  {/* the rest of your app */}
</OmnipayProvider>;

// import useOmnipay hook in the component you need to show the bills or wallet sdk in
const { initiateBills, initiateWallet } = useOmnipay();

function onBillsClosed() {
  console.log('sdk is closed..you can do some stuff');
}

function onWalletClosed() {
  console.log('wallet is closed..you can do some stuff');
}

initiateBills({ phoneNumber: '08020001111', onClose: onBillsClosed });
initiateWallet({
  phoneNumber: '08020001111',
  customerRef: '9ab6790',
  userRef: '889huop',
  onClose: onWalletClosed,
  usesAirtimeData: true,
  usesBills: true,
  usesPaylater: true,
  usesPromo: true,
  usesPos: true,
  usesTransfer: true,
});

Properties

Name	Type	Description
color	String	color of primary buttons and links
env	String	dev or prod
phoneNumber	String	phone number of the customer
publicKey	String	public key of the company on omnipay
onClose	Function	this is used to notify you when the sdk closes
usesAirtimeData	Boolean	whether to show airtime and data shortcut in wallet view
usesBills	Boolean	whether to show bills shortcut in wallet view
usesPaylater	Boolean	whether to paylater tab in wallet view
usesPromo	Boolean	whether to show promo tab in wallet view
usesPos	Boolean	whether to pos shortcur in wallet view
usesTransfer	Boolean	whether to transfer shortcut in wallet view

Registration Sdk

import { Omnipay } from "omnipay-reactnative-sdk";

//render it anywhere on your page where you want to display the registration sdk
<Omnipay.Registration
  env="dev"
  color="#42a99b"
  publicKey="OMNIPUBKEY_K0VUJN0JAJZIXUGKAG6XNBXR-RH5YNRS"
  phoneNumber="09031234571"
  onRegistrationSuccessful={({ customerRef, walletId }) => {
    /**
     * the customer ref and walletid can be saved 
     * to your database at this point
     * 
     * we will also be sending a webhook notification
     * so, you can either save at this point or via the webhook
     */
    console.log(customerRef, walletId);
  }}
  onClose={() => {
    /**
     * the user is done with registration.
     * you can navigate them else where at this point
     */
   
  }}
/>

Properties

Name	Type	Description
color	String	color of primary buttons and links
env	String	dev or prod
phoneNumber	String	phone number of the customer
publicKey	String	public key of the company on omnipay
view	String	the view to render on the sdk