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 wallet sdk in
const { initiateWallet } = useOmnipay();

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

initiateWallet({
  customerRef: '299911',
  onClose: onWalletClosed,
  usesAirtimeData: true,
  usesBills: true,
  usesPaylater: true,
  usesPromo: true,
  usesPos: true,
  usesTransfer: true,
  sessionId: '9e949499494',
  kycStatus: 'verified',
  launchPage: 'wallet',
});

Properties

| Name | Type | Description | | --------------- | -------- | -------------------------------------------------------- | | color | String | color of primary buttons and links | | env | String | dev or prod | | customerRef | String | customer reference 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 | | sessionId | String | unique session id to identify the sdk session | | kycStatus | String | customer's KYC status: "verified" or "unverified" | | launchPage | String | page to launch when opening wallet (default: "wallet") |

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
     *
     */
    console.log(customerRef, walletId);
  }}
  onClose={() => {
    /**
     * the user is done with registration.
     * you can navigate them else where at this point
     */

  }}
  callback={{
    url: "" //webhook url to receive customerRef and walletId via
    secretKey: "" // this will be passed as Secret-Key in the headers
  }}
/>

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 |

Payment Linking Sdk

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

//render it anywhere on your page where you want to display the payment linking sdk
<Omnipay.PaymentLinking
  env='dev'
  color='#42a99b'
  publicKey='OMNIPUBKEY_K0VUJN0JAJZIXUGKAG6XNBXR-RH5YNRS'
  phoneNumber='09031234571'
  customerRef='010019ddh'
  amount={5000}
  sessionId='session123'
  orderId='order456'
  onPaymentLinkingSuccessful={() => {
    /**
     * payment linking has been completed successfully
     */
  }}
  onClose={() => {
    /**
     * the user is done with payment linking.
     * 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 | | publicKey | String | public key of the company on omnipay | | phoneNumber | String | phone number of the customer (required if customerRef not provided) | | customerRef | String | customer reference of the customer (required if phoneNumber not provided) | | userRef | String | user reference of the customer (if phoneNumber/customer ref not provided) | | amount | Number | amount to be linked for payment in kobo | | sessionId | String | unique session identifier | | orderId | String | order identifier | | onPaymentLinkingSuccessful | Function | callback when payment linking is successful | | onClose | Function | callback when the payment linking modal is closed |

Face Verification Sdk

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

//render it anywhere on your page where you want to display the face verification sdk
<Omnipay.FaceVerification
  env='dev'
  color='#42a99b'
  preAuthKey='your-64-character-pre-auth-key-here-1234567890123456789012345678901234'
  onVerificationSuccessful={(faceAuthToken) => {
    /**
     * face verification has been completed successfully
     * faceAuthToken can be used for authentication
     */
    console.log('Face auth token:', faceAuthToken);
  }}
/>;

Properties

| Name | Type | Description | | ------------------------- | -------- | ------------------------------------------------------------------------- | | color | String | color of primary buttons and links (must be at least 3 characters) | | env | String | dev or prod | | preAuthKey | String | pre-authentication key for face verification (required, must be 64 characters) | | onVerificationSuccessful | Function | callback when face verification is successful, receives faceAuthToken as parameter |