React Native

Reference for integrating with the Okra Widget React Native SDK

📘

This guide covers the latest major version of the React Native SDK, which is version 0.0.2

Overview

The Okra Widget SDK is a quick and secure way to link bank accounts to Okra in your Android an iOS React Native app. The widget is a drop-in module that handles connecting a financial institution to your app (credential validation, multi-factor authentication, error handling, etc). All without passing sensitive personal information to your server.

🚧

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

Requirement

  • React Native Version 0.61.3 or higher
  • Setup Android and iOS setup for platform- specific OS

Getting Started

Install React 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

Here's a complete source code on how you would integrate this on your project.

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",
    short_url: "buildWithShortUrl",
    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');
    }}
/>
  );
}

OkraView

OkraView is the the React component used to open a widget from a React Native application. OkraView renders a Pressable component, which wraps the component you provide and intercepts onPress events to open the widget.

🚧

Want to checkout Okra Options?

View a complete list of customizable options here

okraOptions
A configuration used to open OkraView with some options

onSuccess
A function that is called when a user has successfully linked an Item. The function should expect one argument.

onError
A function that is called when a user encounters an error. The function should expect one argument.

children
The underlying component to render

Not a Developer?

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


What's Next

View all our Libraries & SDKs or get started with an API Overview

Did this page help you?