React Native

Overview

The Okra Widget SDK is a quick and secure way to link bank accounts to Okra through your React Native app. The Widget is a drop-in module that handles credential validation, MFA, and error handling for each financial institution that Okra supports, all without passing sensitive personal information to your server.

Requirements

React Native version 0.71.8 or higher
iOS Pods set up in your project

Follow these steps to integrate the Okra Widget into your React Native application. This guide is also relevant if you are using React Native CLI and an Expo Project.

Install the React Native package

Install the Okra React Native official package

npm install okra-react-native-official

yarn add react-native-official

Install Pods in the root directory of your project

$ pod install

Customize your Widget

Okra enables you to create a Widget experience that best fits your use case and business needs. You have the flexibility to fine-tune user interface elements like button texts and company branding. You can also determine what financial institutions you want your users to see when they connect their accounts, and set up the products that you want to retrieve data for.

📘
You can build your Widget in the App Builder without writing any code - visit the Customization guide for more details.

Integrate your Widget

After you have customized your Widget experience, you have 2 options to integrate the Widget into your app or website: building with short_url, and building with options.

📘
Visit the Integration guide to understand the 2 integration options.

Sample code

You can find sample source codes for both intergation options here:

Using TypeScript

import React, { Component } from 'react';
import {
  Okra,
  OkraOptionsProps,
  OkraUrlProps,
} from 'okra-react-native-official';

const App = () => {
   const isDarkMode = useColorScheme() === 'dark';

   let okraOptions: OkraOptionsProps = {
    okraOptions: {
      callback_url: 'https://webhook.site/ded54b3f-f4f5-4fa1-86c3-0def6098fb4d', // The URL that Okra can send webhooks to.
      clientName: 'client',
      color: '#953ab7',
      connectMessage: 'Which account do you want to connect with?',
      currency: 'NGN',
      env: 'production-sandbox', // The environment you want to use. Use production-sandbox for testing.
      filters: {
        banks: ['access-bank', 'guaranty-trust-bank'],
        industry_type: 'all',
      },
      meta: "Any data type", // The metadata you want to include.
      options: {
        name: "Test Name", 
      },
      isCorporate: false,
      key: '{api_key}', // Your API key.
      token: '{client_token}', // Your client token.
      limit: 24,
      logo: 'https://cdn.okra.ng/images/icon.svg',
      products: ['auth', 'balance', 'identity', 'transactions'],
      widget_failed: '',
      widget_success: 'Your account was successfully linked to Okra, Inc',
    },
    onError: (error) => {
      console.log(error);
    },
    onSuccess: (data) => {
      console.log(data);
    },
    onClose: () => {
      console.log('on close');
    },
    onBeforeClose: () => {
      console.log('on before close');
    },
   };

   return (
     <SafeAreaView style={{flex:1}}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <View style={[styles.container, styles.flex]}>
         <Okra.buildWithOptions(okraOptions)/>
       </View>
     </SafeAreaView>
   );
 };

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

export default App;

import React, { Component } from 'react';
import {
  Okra,
  OkraOptionsProps,
  OkraUrlProps,
} from 'okra-react-native-official';

const App = () => {
   const isDarkMode = useColorScheme() === 'dark';

   let okraUrl: OkraUrlProps = {
     shortUrl: 'bc_kWKf2l', // Your short_url.
     onError: (error) => {
       console.log(error);
     },
     onSuccess: (data) => {
       console.log(data);
     },
     onClose: () => {
       console.log('on close');
     },
     onBeforeClose: () => {
       console.log('on before close');
     },
   };

   return (
     <SafeAreaView style={{flex:1}}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <View style={[styles.container, styles.flex]}>
         <Okra.buildWithShortUrl(okraUrl)/>
       </View>
     </SafeAreaView>
   );
 };

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

 export default App;

Using JavaScript

import { Okra } from "okra-react-native-official";

let okraOptions = {
  okraOptions: {
    callback_url: 'https://webhook.site/{id}', // The URL that Okra can send webhooks to.
    clientName: 'client',
    color: '#953ab7',
    connectMessage: 'Which account do you want to connect with?',
    currency: 'NGN',
    env: 'production-sandbox', // The environment you want to use. Use production-sandbox for testing.
    filters: {
      banks: ['access-bank', 'guaranty-trust-bank'],
      industry_type: 'all',
    },
    meta: "Any data type", // The metadata you want to include.
    options: {
      name: "Test Name"
    }
    isCorporate: false,
    key: '{api_key}', // Your API key.
    token: '{client_token}', // Your client token.
    limit: 24,
    logo: 'https://cdn.okra.ng/images/icon.svg',
    products: ['auth', 'balance', 'identity', 'transactions'],
    widget_failed: '',
    widget_success: 'Your account was successfully linked to Okra, Inc',
  },
  onError: (error) => {
    console.log(error);
  },
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => {
    console.log("on close");
  },
  onBeforeClose: () => {
    console.log("on before close");
  },
};

export function OkraOptionsScreen() {
  return Okra.buildWithOptions(okraOptions);
}

import { Okra } from "okra-react-native-official";

let okraUrl = {
  shortUrl: "bc_kWKf2l", // Your short_url.
  onError: (error) => {
    console.log(error);
  },
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => {
    console.log("on close");
  },
  onBeforeClose: () => {
    console.log("on before close");
  },
};

export function OkraShortUrlScreen() {
  return Okra.buildWithShortUrl(okraUrl);
}

Using events

Use events to understand how your users interact with the Widget and build analytics on the data you receive. You can also use events to handle errors in different scenarios.

The Okra component opens a Widget from your React Native application. Okra renders a Pressable component, which wraps the component you provide and intercepts onPress events on the Widget.

📘
Visit the Events guide to understand the available events and their properties.

Need help?

Check out the Widget Errors and the API Errors guide to understand the different error scenarios.
Join Okra's Developer Community on Slack if you have technical questions or need help with your code.
Get in touch with the Support team if you have any questions about Okra's products.