SDK integration guide

Learn how you can install and use Okra's libraries and SDKs to benefit from features like callbacks, metadata, and bank filtering.

Overview

Okra's SDKs offer a quick and secure way to link bank accounts to Okra through your websie or app. The Okra app 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.

Install SDKs

Flutter

Follow these steps to integrate the Okra app into your Flutter application on Android and iOS using Okra's Flutter SDK.

  1. Add okra_widget_official as a package dependency in your pubspec.yaml file:

    dependencies:
 okra_widget_official: ^3.1.12

  2. If your application is for iOS, opt in to the embedded views preview and enable arbitrary loads by adding the following configuration to your application's Info.plist file:

      <key>io.flutter.embedded_views_preview</key>
        <string>YES</string>
        <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
    </dict>

React Native

Requirements

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

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

  1. Install the React Native WebView component

npm install react-native-webview@13.6.2
yarn add react-native-webview@13.6.2

  1. Install the Okra React Native official package

npm install okra-react-native-official
yarn add okra-react-native-official
  1. Install Pods in the root directory of your project
$ pod install

Web

Follow these steps to integrate the Okra app into your web application using JavaScript, Angular, or Vue.

Install the OkraJS SDK

  1. Install the OkraJS SDK:

$ npm install okra-js
$ yarn add okra-js
<script src="https://cdn.okra.ng/v3/bundle.js"></script>

When using Okra's CDN, include the initialization script on every page of your site. Always load the script directly from https://cdn.okra.ng and do not bundle or self-host it.

  1. Retrieve your client token from the Dashboard

Android

Clone the GitHub repository and try out the example application, which provides a reference implementation in Java.

Requirements

  • Android Studio 4.0 or above
  • Android 5.0 (API level 21) or above
  • Check out the Onboarding guide and create your account to retrieve your Client Token, API Keys, and Private Keys.
  • Create sandbox customers and the account connection flow.

Follow these steps to integrate the Okra app into your Android application in native Android.

gradle

  1. Add it to your root build.gradle at the end of repositories:
allprojects {
  repositories {
   ...
   maven { url 'https://jitpack.io' }
  }
}
  1. Add the dependency:
dependencies {
 implementation 'ng.okra.com:okra:1.0.0'
 }

React

Follow these steps to integrate the Okra app into your React application using OkraJS.

  1. Create your app:
npm create react-app okra-widget
  1. Navigate to your app and start it:
cd okra-widget
npm start
  1. Install OkraJS:

To add logic that triggers the Okra app, install the OkraJS library.

npm install okra-js

Build your Okra app

Okra enables you to build an app 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 Okra app in the App Builder without writing any code - visit the guide guide for more details.

Integrate your app

After you build and customize your Okra app, you have 2 options to embed it into your app or website: with short_url, or with options.

Visit the Embed your app guide to understand these 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);
}

Need help?

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

Was this page helpful?

On this page