Web
Fast and responsive widget for web applications, in vanilla JavaScript, Angular, React, or Vue 🖥.
Installation
Include the Okra Widget initialize script on each page of your site. It should always be loaded directly from https://cdn.okra.ng, rather than included in a bundle or hosted yourself.
How it works
1. Embed the connect widget snippet
To embed the widget code in your application, add one of the following code elements to the page where the Connect Widget should appear.
The tabs contain snippets for React, Vue, or shortURL options. You can also select the relevant code tab for you.
#CDN
<script src="https://cdn.okra.ng/v2/bundle.js"></script>
#NPM
npm install okra-js
#Yarn
yarn add okra-js
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')
}
})
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>
Edit <code>src/App.js</code> and save to reload.
</p>
<button onClick={() => widgetOkra()}>
Run widget
</button>
</header>
</div>
);
}
export default App;
<template>
<div id="app">
<button v-on:click="okrawidget">Open Widget</button>
</div>
</template>
<script>
import Okra from 'okra-js'
export default {
methods: {
okrawidget: Okra.buildWithOptions({
name: 'Peter the Builder',
env: 'production-sandbox',
app_id: '',// app_id from your app builder
key: 'YOUR PRODUCTION KEY FROM YOUR DASHBOARD ', // Your key from the Okra dashboard
token: 'YOUR CLIENT TOKEN FROM YOUR DASHBOARD', // Your token from the okra dashboard
products: ['auth','identity','balance','transactions', 'income'], //in lowercase
onSuccess: function(data){
console.log('options success', data)
},
onClose: function(){
console.log('options 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>
The sample above is not exhaustive, you can use this package in other frontend javascript frameworks.
Make sure you include the reference to
https://cdn.okra.ng/v2/bundle.js. Otherwise, the widget will not load in your app!
2. Get your token from your dashboard
You can get your token from the dashboard.
Need more options?
Checkout a list of all the available Widget Properties to add to your widget options below.
Confused on BuildWithOption and BuildWithShortURL?
If you don't know the difference between the two options, read through here.
Not a developer
Get started without writing a single line of code, Try our App Builder! Click here to get started
Updated 3 months ago