omnipay-react-sdk

Omnipay react sdk

Installation

yarn add omnipay-react-sdk

Usage

// usage with useOmnipay hook
import { OmnipayProvider, useOmnipay } from "omnipay-react-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",
  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-react-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 |

Bvn Verification Sdk

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

//render it anywhere on your page where you want to display the registration sdk
<Omnipay.BvnVerification
  env="dev"
  color="#42a99b"
  publicKey="OMNIPUBKEY_K0VUJN0JAJZIXUGKAG6XNBXR-RH5YNRS"
  customerRef="010019ddh"
  onVerificationSuccessful={() => {
    /**
     * bvn has been verified successfully
     */
  }}
  onClose={() => {
    /**
     * the user is done with bvn verification.
     * 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 | | customerRef | String | customer ref of the customer |