react-okra

This is a react package for implementing okra enrollment gateway

Usage no npm install needed!

<script type="module">
  import reactOkra from 'https://cdn.skypack.dev/react-okra';
</script>

README

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

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

Please checkout Okra Documentation for other available options you can add to the tag

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributions ✨

  1. Fork it!
  2. Create your feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Some commit message'
  4. Push to the branch: git push origin feature-name
  5. Submit a pull request

This project follows the all-contributors specification. Contributions of any kind welcome!

Follow on Twitter @somtougeh