React-Native USSD

Reference for integrating with Okra React Native USSD SDK

📘

This guide covers the latest major version of the React Native SDK, which is version 0.0.4-ussd.

Overview

To get started with Okra for React Native youʼll want to sign up for free API keys through the Okra Developer Dashboard and retrieve your Client Token ,API Keys, and Private Keys .

Requirement

  • React Native Version 0.61.3 or higher
  • Setup Android and iOS setup for platform- specific OS

Getting Started

Installing the SDK

In your react-native project directory, run:

npm install [email protected]

Next Steps

  • Open the android folder and add this to the build.gradle file.
allprojects {
    repositories {
   maven {
                url 'https://pro.maven.usehover.com/releases'
                credentials {
                     username project.OkraUSSDUsername
                     password project.OkraUSSDPassword
                }
                authentication { basic(BasicAuthentication) }
                content { includeGroup "com.hover" }
            }
}
}
  • Add the code below to your gradle.properties (Note: The values would be given to you) and sync.
OkraUSSDUsername=xxx 
OkraUSSDPassword=xxx
  • In your MainApplication add this code to the getPackages function.
import com.reactlibrary.OkraUSSDPackage;

  protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
            packages.add(new OkraUSSDPackage());
          return packages;
        }
  • Link react-native-okra.
react-native link react-native-okra
  • Pod install: enter the ios directory in the root directory the project and run:
pod install

Install react-native-webview and Device info plugin

To install react-native-webview the following are the steps that needs to be followed;

  • 1.install react-native-webview
    In your terminal, run;
npm install --save react-native-webview
  • 2.To link react-native-webview, run
react-native link react-native-webview
  • 3.Install react-native-device-info
npm install --save react-native-device-info
  • 4.To link react-native-device-info, run the command in your terminal;
react-native link react-native-device-info
  • 5.Pod install: enter the ios directory in the root directory the project and run:
pod install

OkraView is the the React component used to open a widget from a React Native application. OkraView renders a Pressable component, which wraps the component you provide and intercepts onPress events to open the widget.

Usage

Should incase you like to try out this SDK, after the configuration? Just copy this code.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import OkraView from 'react-native-okra-expo';

export default function App() {
  var okraOptions = {
    callback_url:"https://webhook.site/ded54b3f-f4f5-4fa1-86c3-0def6098fb4d",
    clientName:"client",
    color:"#953ab7",
    connectMessage:"Which account do you want to connect with?",
    currency:"NGN",
    env:"production", // for sandbox use production-sandbox
    exp:"2020-08-06",
    filter:{
      banks: ['access-bank', 'guaranty-trust-bank'],
      industry_type: 'all',
    },
    options:{saverid: 'this is it'},
    isCorporate:false,
    ussd:true,
    key:"key",
    limit:"24",
    logo:"https://cdn.okra.ng/images/icon.svg",
    products:['auth', 'balance', 'identity', 'transactions'],
    redirect_url:"redirect",
    short_url: "buildWithShortUrl",
    success_message:"this is the success message",
    success_title:"it has entered success",
    token:"token",
    widget_failed:"",
    widget_success:"Your account was successfully linked to Okra, Inc"
  }
  return (
    <OkraView
    okraOptions={okraOptions}
    onClose={response => {
      console.log('on close');
    }}
    onSuccess={response => {
      console.log('on success', response);
    }}
    onError={response => {
      console.log('on error');
    }}
    <Text>Add Account</Text>
/>
  );
}

OkraView

Here's an explanation of our the above code works.

okraOptions
A configuration used to open OkraView with some options

onSuccess
A function that is called when a user has successfully linked an Item. The function should expect one argument.

onError
A function that is called when a user encounters an error. The function should expect one argument.

children
The underlying component to render


What's Next

Check out our Android and Flutter SDK

Did this page help you?