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 |