React-okra NPM

React-Okra

This is a react package for implementing Okra enrollment gateway

Dont use yet

There is a cross origin issue with the CDN from Okra. Hopefully it is resolved before you use this package

Installation

$ npm install react-okra
# or
$ yarn add react-okra

Examples

Basic - CodeSandbox

import React from 'react';
import { useOkra, OkraButton } from 'react-okra';

export default function App() {
  const config = {
    env: 'production',
    clientName: 'Chikala',
    callbackUrl: 'www.google.com',
    token: '5d8a35224d8113507c7521ac',
    okraKey: 'c81f3e05-7a5c-5727-8d33-1113a3c7a5e4',
    filter: {
      industry_type: 'all',
      banks: [
        'ecobank-nigeria',
        'fidelity-bank',
        'first-bank-of-nigeria',
        'first-city-monument-bank',
        'guaranty-trust-bank',
        'heritage-bank',
        'polaris-bank',
        'stanbic-ibtc-bank',
        'standard-chartered-bank',
        'sterling-bank',
        'union-bank-of-nigeria',
        'united-bank-for-africa',
        'wema-bank',
        'unity-bank',
        'alat',
        'access-bank',
      ],
    },
    options: {
      fullname: 'USER_FULL_NAME',
      email: 'USER_EMAIL',
      bvn: 'USER_BVN',
    },
    products: ['auth', 'transactions', 'balance', 'income', 'identity'],
  };

  const handleOkraConnection = useOkra(config);

  const okraConfig = {
    ...config,
    text: 'Connect bank with Okra!',
    onSuccess: (response) => {
      console.log(response);
    },
    onClose: () => {},
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button
        onClick={() => {
          handleOkraConnection({
            onSuccess: (response) => {
              console.log(response);
            },
            onClose: () => {},
          });
        }}
      >
        Connect bank with Okra
      </button>

      <OkraButton {...okraConfig} />
    </div>
  );
}

OkraOptions

Name	Type	Required	Default Value	Description
`callback-url`	`string`	true	undefined
`key`	`String`	true	undefined	Your public key from Okra.
`token`	`String`	true	undefined	Your token from your Okra Dashboard.
`products`	`Array`	true	`['Auth']`	The Okra products you want to use with the widget.
`env`	`String`	true	production	`production` or `production-sandbox`
`client-name`	`String`	false	`This client`	Name on the widget
`logo`	`String(URL)`	false	Okra's Logo
`color`	`HEX`	false	#3AB795	Theme on the widget
`limit`	`Number`	false	24	Statement length
`filter`	`Object`	false		Filter for widget
`corporate`	`Boolen`	false	`false`	Corporate or Individual account
`connect-message`	`String`	false		Instruction to connnect account
`guarantors`	`Object`	false
`widget-success`	`String`	false		Widget Success Message
`widget-failed`	`String`	false		Widget Failed Message
`currency`	`String`	false	NGN	Wallet to bill
`exp`	`Date`	false	Won't expire	Expirary date of widget
`options`	`Object`	false		You can pass a object custom values eg id
`success`	`Function`	false		Action to perform after widget is successful
`close`	`Function`	false		Action to perform if widget is closed