Okra Widget React Native Expo 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 expo users to help implement okra widget. If you are NOT an expo user, click here

Get Started

This library would help you add Okra widget to your react native IOS/Android app in no time.

Install Okra-Expo

1. install react-native-okra-expo

   $ npm install react-native-okra-expo@2.1.0

Install react-native-webview, expo-device plugin and expo-constants plugin

1. install react-native-webview

   npm install --save react-native-webview

2. install expo-device

   npm install --save expo-device

3. install expo-constants

   npm install --save expo-constants

Usage for version 2.0.6-beta.1 and below

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

export default function App() {
  return (
    <OkraView
        callback_url=""
        clientName="client"
        color="#953ab7"
        connectMessage="Which account do you want to connect with?"
        currency="USD"
        env="production" // for sandbox use production-sandbox
        exp="2020-08-06"
        filter={{
          banks: ['access-bank', 'guaranty-trust-bank'],
          industry_type: 'all',
        }}
        options={{
          client_id: 'anything',
          client_name: 'John Doe',
        }}
        isCorporate={false}
        public_key="1ee202-332-eued-3d33ee"
        limit="24"
        logo="https://cdn.okra.ng/images/icon.svg"
        products={['auth', 'balance', 'transactions']}
        redirect_url="redirect"
        success_message="this is the success message"
        success_title="it has entered success"
        token="5ecfd65b45006210334e35ce"
        widget_failed=""
        widget_success="Your account was successfully linked to Okra, Inc"
        onClose={response => {
          console.log('it hit on close');
        }}
        onSuccess={response => {
          console.log('it hit on success', response);
        }}
        onError={response => {
          console.log('it hit on error');
        }}
    />
  );
}

Usage for version 2.0.7-beta.1 and above

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

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

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