Skip to content
This repository has been archived by the owner on Feb 9, 2024. It is now read-only.

Latest commit

 

History

History
140 lines (109 loc) · 5.63 KB

README.md

File metadata and controls

140 lines (109 loc) · 5.63 KB

Okra Widget React Native SDK

alt text

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]
  1. link react-native-okra
$ react-native link react-native-okra
  1. 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
  1. link react-native-okra-expo
$ react-native link react-native-webview
  1. install react-native-webview
npm install --save react-native-device-info
  1. link react-native-okra
$ react-native link react-native-device-info
  1. 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