React

ℹ️

Need to start connecting accounts through your React app? In this article, we'll be exploring how to connect the Okra widget with your React app. We'll be using a sample page for our demo.

Introduction

ℹ️

You should sign up for an Okra account for free. We'll supply you with test keys so you can put your integration to the test.

For this demo, we'll use our public keys. Login to your Okra dashboard and select the Settings tab, then API Keys & Webhooks to receive your public key.

It's worth noting that you have two public keys: Test and Live. It's a good idea to use your test keys when developing your app, as this will allow you to simulate transactions. You can switch over to live keys once your app is ready for production.

❗️

❌ Note
Avoid using secret keys on the client-side, because this is a client-side integration, our API keys will be made public. We want to be sure we're using our public keys to keep anyone from gaining access to our Okra account. Only use secret keys on the server.

Project setup

So, let's get to coding! To start off, I'm going to create a new react app. I like to use npm to get started with my react apps, but you're welcome to use yarn.

npm create react-app okra-widget

Once our app is created, we'll need to navigate into our app's directory and start our app:

cd okra-widget
npm start

Install Okra

We need to add some logic that will trigger the Okra widget, hence making it possible to connect a customer's data and initialize a transaction on Okra. Let's install the Okra Js library:

npm install okra-js

Once the library installs successfully, we can add some variables to hold the state and a function to handle the state changes. I'll explain the variables we're passing and what they're for in a little bit. For now, we'll just add them and hardcode our publicKey and pass in the various product we want to connect with.

Implement widget

Now that you have installed the okraJs library, it's time we implement and launch the widget.
Inside your App.js file, erase, all that's in there and include the code snippet below.

import Okra from "okra-js"
import logo from './logo.svg';
import './App.css';

function App() {
  const widgetOkra = () => {

    Okra.buildWithOptions({
        name: 'Okra React Widget',
        env: 'sandbox',
        app_id: '',// app_id from your app builder
        key: 'YOUR PUBLIC API KEY', 
        token: 'YOUR CLIENT TOKEN',
        products: ['auth','identity','balance','transactions', 'income'],
        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;

Go back to your terminal and run npm run start, if you did everything correctly, you should have your Okra widget open up in your browser.