React Native Expo

Reference for integrating with the Okra Widget React Native Expo SDK

📘

This guide covers the latest major version of the React Native Expo SDK, which is version 2.0.7-beta.1

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 expo users to help implement okra widget. If you are NOT 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 Okra-Expo

  1. install react-native-okra-expo
$ npm install [email protected]

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

  1. install react-native-webview
npm install --save react-native-webview
  1. install expo-device
npm install --save expo-device
  1. install expo-constants
npm install --save expo-constants

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

Done Integrating?

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


What's Next

Checkout related articles

Did this page help you?