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/v3/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>

:information-source:

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.

Not a developer

Get started without writing a single line of code, Try our App Builder! Click here to get started


What's Next

View all our Libraries & SDKs or get started with an API Overview

Did this page help you?