Web
Learn how you can implement the Okra Widget in your web application
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.
Updated 2 months ago