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