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
- 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 |
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 ✨
- Fork it!
- Create your feature branch:
git checkout -b feature-name
- Commit your changes:
git commit -am 'Some commit message'
- Push to the branch:
git push origin feature-name
- Submit a pull request
This project follows the all-contributors specification. Contributions of any kind welcome!
Follow on Twitter @somtougeh