# omnipay-react-sdk

> Omnipay react sdk

Latest version **1.1.3** (published 2026-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install omnipay-react-sdk
pnpm add omnipay-react-sdk
yarn add omnipay-react-sdk
bun add omnipay-react-sdk
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2026-02-02 |
| First published | 2022-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 236.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | engrtitus |

## Links

- npm: https://www.npmjs.com/package/omnipay-react-sdk
- npm.io page: https://npm.io/package/omnipay-react-sdk

## Recent versions

- 1.1.3 (latest) — 2026-02-02
- 0.8.9-beta.14 (beta) — 2025-04-22
- 1.1.2 — 2025-12-27
- 1.1.1 — 2025-12-19
- 1.1.0 — 2025-12-19
- 1.0.9 — 2025-12-19
- 1.0.8 — 2025-11-18
- 1.0.7 — 2025-10-21
- 1.0.6 — 2025-09-29
- 1.0.5 — 2025-08-21
- 1.0.4 — 2025-08-21
- 1.0.3 — 2025-08-21
- 1.0.2 — 2025-08-21
- 1.0.1 — 2025-08-21
- 1.0.0 — 2025-07-17
- … 106 more at https://npm.io/package/omnipay-react-sdk/versions

## README

# omnipay-react-sdk

Omnipay react sdk

## Installation

```sh
yarn add omnipay-react-sdk
```

## Usage

```js
// 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`:

```js
<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

```js
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

```js
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

```js
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

```js
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 |

---
_Source: https://npm.io/package/omnipay-react-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._