Web

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

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>
          Okra test application
        </p>
        <button onClick={() => widgetOkra()}>
          Run widget
        </button>
      </header>
    </div>
  );
}

export default App;

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

❗️
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!

Get your token from your dashboard

You can get your token from the dashboard.

📘
For more options, check out a list of all the available Widget Properties to add to your widget options below.

🚧
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