Web

Overview

The OkraJS SDK is a quick and secure way to link bank accounts to Okra through your web application. 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.

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

Install the OkraJS SDK

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.

Retrieve your client token from the Dashboard

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

To embed the Widget in your web application, add the source code to the page in the location where you want the Widget to appear.

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

import Okra from 'okra-js'

Okra.buildWithShortUrl({
    short_url: '', //Your short url from the link builder
    onSuccess: function(data){
        console.log('options success', data)
    },
    onClose: function(){
        console.log('options close')
    }
})

import Okra from 'okra-js'

Okra.buildWithOptions({
    name: 'Peter the Builder',
    env: 'production-sandbox',
    app_id: ''// app_id from your app builder
    key: '', // Your key from the Okra dashboard
    token: '', // Your token from the okra dashboard
  	products: ['auth','identity','balance','transactions', 'income'], //in lowercase
    payment: true,
      charge: {
            type: 'one-time',  // recurring
            amount: 50000, // amount in KOBO
            note:  "description of payment" ,
            currency: "NGN" // defaults to NGN, // Your account ID to credit
        },
    onSuccess: function(data){
        console.log('options success', data)
    },
    onClose: function(){
        console.log('options close')
    }
})

Check out these sample codes for Angular and Vue:

Using Angular

import Okra from "okra-js"
import logo from './logo.svg';
import './App.css';

function App() {
  const widgetOkra = () => {

    Okra.buildWithOptions({
        name: 'Peter the Builder',
        env: 'production-sandbox',
        app_id: '',// app_id from your app builder
        key: 'YOUR PRODUCTION KEY FROM YOUR DASHBOARD', 
        token: 'YOUR CLIENT TOKEN FROM YOUR DASHBOARD',
        products: ['auth','identity','balance','transactions', 'income'], //in lowercase
        onSuccess: function(data){
            console.log('options success', data)
        },
        onClose: function(){
            console.log('options close')
        }
    })
      }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Okra test application
        </p>
        <button onClick={() => widgetOkra()}>
          Run widget
        </button>
      </header>
    </div>
  );
}

export default App;

Using Vue

<template>
  <div id="app">
    <button type="button" @click="okraWidget">Open Widget</button>
  </div>
</template>


<script>
import Okra from 'okra-js'

export default {
  methods: {
    okraWidget() {
      Okra.buildWithOptions({
        name: 'App tester',
        env: 'production-sandbox',
        app_id: 'App id',// app_id from your app builder
        key: 'Your key', // Your key from the Okra dashboard
        token: 'Your-token', // Your token from the okra dashboard
        products: ['auth','identity','balance','transactions', 'income'], //in lowercase
        onSuccess: function(data){
         let response = {event:'option success', data}
          console.log(data)
        },
        onClose: function(){
         let response = {event:'option close'}
        }
      })
    }
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

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.