omnipay-react-sdk

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")
analyticsConfig	Object	optional analytics configuration (see below)

Analytics Configuration

You can track user events from the Omnipay SDK by providing an analyticsConfig object to the OmnipayProvider:

<OmnipayProvider
  publicKey='OMNIPUBKEY_HZA3ERGYEE5XUFGTZDQV_MNKRSTA3-TU'
  env='dev'
  color='red'
  analyticsConfig={{
    onEvent: (eventName, payload) => {
      // Send events to your analytics provider
      console.log('Omnipay Event:', eventName, payload);
      // Example: analytics.track(eventName, payload);
    },
    allowedEvents: ['payment_initiated', 'payment_completed'] // Optional: whitelist specific events
  }}
>
  {/* your app */}
</OmnipayProvider>

Analytics Config Properties:

Name	Type	Description
onEvent	Function	Callback that receives (eventName: string, payload?: object)
allowedEvents	String[]	Optional array of event names to forward. If omitted, all events are forwarded

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