Okra Widget React Native SDK

React Native SDK for implementing the Okra widget - Okra is a safe and secure web drop-in module and this library provides a front-end web (also available in iOS, Android, and JavaScript) SDK for account authentication and payment initiation for each bank that Okra supports.

Try the demo

Checkout the widget flow to view how the Okra Widget works. Click "See How it Works"

Before getting started

• Checkout our get started guide to create your developer account and retrieve your Client Token, API Keys, and Private Keys.
• Create a sandbox customer, so you can get connecting immediately.

Bonus Points

• Setup Slack Notifications so you can see your API call statuses and re-run calls in real-time!

Get Started

This library would help you add Okra widget to your react native IOS/Android app in no time. This is a react native library for non-expo users to help implement okra widget. If you are an expo user, click here

Install Reach Native Okra Widget

1. install react-native-okra

$ npm install [email protected]

2. link react-native-okra

$ react-native link react-native-okra

3. Pod install: enter the ios directory in the root directory the project and run:

$ pod install

Install react-native-webview and Device info plugin

1. install react-native-webview

npm install --save react-native-webview

2. link react-native-okra-expo

$ react-native link react-native-webview

3. install react-native-webview

npm install --save react-native-device-info

4. link react-native-okra

$ react-native link react-native-device-info

5. Pod install: enter the ios directory in the root directory the project and run:

$ pod install

Usage

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import OkraView from "react-native-okra";

export default function App() {
  var okraOptions = {
    callback_url:"https://webhook.site/ded54b3f-f4f5-4fa1-86c3-0def6098fb4d",
    clientName:"client",
    color:"#953ab7",
    connectMessage:"Which account do you want to connect with?",
    currency:"NGN",
    env:"production", // for sandbox use production-sandbox
    exp:"2020-08-06",
    filter:{
      banks: ['access-bank', 'guaranty-trust-bank'],
      industry_type: 'all',
    },
    options:{saverid: 'this is it'},
    isCorporate:false,
    key:"fa85e5ce-0e4e-5a88-883d-9ba9b4357683",
    limit:"24",
    logo:"https://cdn.okra.ng/images/icon.svg",
    products:['auth', 'balance', 'identity', 'transactions'],
    redirect_url:"redirect",
    success_message:"this is the success message",
    success_title:"it has entered success",
    token:"5da6358130a943486f33dced",
    widget_failed:"",
    widget_success:"Your account was successfully linked to Okra, Inc"
  }
  return (
    <OkraView
    okraOptions={okraOptions}
    onClose={response => {
      console.log('on close');
    }}
    onSuccess={response => {
      console.log('on success', response);
    }}
    onError={response => {
      console.log('on error');
    }}
/>
  );
}

OkraOptions

Name	Type	Required	Default Value	Description
key	String	true	undefined	Your public key from Okra.
token	String	true	undefined	Your pubic Key from okra. Use test key for test mode and live key for live mode
products	Array[String]	true	undefined	The Okra products you want to use with the widget.
payment	Booelan	false		Whether you want to initiate a payment (https://docs.okra.ng/docs/payments)
charge	Object	false		Payment charge opject (https://docs.okra.ng/docs/creating-a-charge)
env	String	true	undefined	'production' or 'production-sandbox'
clientName	String	true	undefined	Name of the customer using the widget on the application
onClose	function	true	undefined	This acts as a callback that gets fired when the OkraView Component has been closed. It is intended to hold your navigation code, to navigate to previous page or any intended page.

View a complete list of customizable options here

Done connecting?

Checkout our API Overiview and see how to use the data you've received and other products you can use to create more personalized experiences for your customers!

Not a developer?

Get started without writing a single line of code, Try our App Builder! Click here to get started