0.1.4 • Published 6 months ago

okra-react-native-official v0.1.4

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Okra Widget React Native SDK

alt text

React Native SDK for implementing the Okra widget - Okra is a safe and secure web drop-in module and this library provides a front-end web (also available in iOS, Android, and JavaScript) SDK for account authentication and payment initiation for each bank that Okra supports.

Try the demo

Checkout the widget flow to view how the Okra Widget works.

Before getting started

  • Checkout our get started guide to create your developer account and retrieve your Client Token, API Keys, and Private Keys.
  • Create a sandbox customer, so you can get connecting immediately.

Bonus Points

Getting Started

This library would help you add Okra widget to your hybrid android/ios application in no time. All you need to do is ...

Install

npm install okra-react-native-official

Usage

import React, { Component } from 'react';
import {
  Okra,
  OkraOptionsProps,
  OkraUrlProps,
} from 'okra-react-native-official';
import { Button, StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

// Build with options
let okraOptions: OkraOptionsProps = {
  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-sandbox', // for sandbox use production-sandbox
    filters: {
      banks: ['access-bank', 'guaranty-trust-bank'],
      industry_type: 'all',
    },
    meta: "Any data type",
    options: {
      name: "Client Name"
    },
    isCorporate: false,
    key: 'Enter Key here',
    token: 'Enter token here',
    limit: 24,
    logo: 'https://cdn.okra.ng/images/icon.svg',
    products: ['auth', 'balance', 'identity', 'transactions'],
    widget_failed: '',
    widget_success: 'Your account was successfully linked to Okra, Inc',
  },
  onError: (error) => {
    console.log(error);
  },
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => {
    console.log('on close');
  },
  onBeforeClose: () => {
    console.log('on before close');
  },
};

//OR
//Build With ShortUrl
let okraUrl: OkraUrlProps = {
  shortUrl: 'bc_kWKf2l',
  onError: (error) => {
    console.log(error);
  },
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => {
    console.log('on close');
  },
  onBeforeClose: () => {
    console.log('on before close');
  },
};


function HomeScreen({ navigation }) {
  const goToOptions = () => {
    navigation.navigate('WithOptions');
  };

  const goToShortUrl = () => {
    navigation.navigate('WithShortUrl');
  };

  return (
    // @ts-ignore
    <View style={styles.container}>
      <Button title="Build With Options" onPress={goToOptions} />
      <View style={{ marginVertical: 10 }} />
      <Button title="Build With ShortUrl" onPress={goToShortUrl} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

// Build With Options
function OkraOptionsScreen() {
  return Okra.buildWithOptions(okraOptions);
}

//Build With ShortUrl
function OkraShortUrlScreen() {
  return Okra.buildWithShortUrl(okraUrl);
}

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="WithOptions" component={OkraOptionsScreen} />
          <Stack.Screen name="WithShortUrl" component={OkraShortUrlScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Okra.buildWithOptions Options

NameTypeRequiredDefault ValueDescription
app_idStringtrueYour app id from your Okra Dashboard.
okraKeyStringtrueYour public key from your Okra Dashboard.
tokenStringtrueYour token from your Okra Dashboard.
envStringfalseproductionproduction(live)/production-sandbox (test)
productsArraytrue['Auth']The Okra products you want to use with the widget.
paymentBooelanfalseWhether you want to initiate a payment (https://docs.okra.ng/docs/payments)
chargeObjectfalsePayment charge opject (https://docs.okra.ng/docs/widget-properties#set-up-payments)
productsArraytrue['Auth']The Okra products you want to use with the widget.
logoString(URL)falseOkra's Logo
nameStringfalseYour Company's nameName on the widget
colorHEXfalse#3AB795Theme on the widget
limitNumberfalse24Statement length
filterObjectfalseFilter for widget
isCorporateBoolenfalsefalseCorporate or Individual account
connectMessageStringfalseInstruction to connnect account
widget_successStringfalseWidget Success Message
widget_failedStringfalseWidget Failed Message
callback_urlString(Url)false
currencyStringfalseNGNWallet to bill
expDatefalseWon't expireExpirary date of widget
optionsObjectfalseYou can pass a object custom values eg id
onSuccessFunctionfalseAction to perform after widget is successful
onCloseFunctionfalseAction to perform if widget is closed
onErrorFunctionfalseAction to perform on widget Error
BeforeCloseFunctionfalseAction to perform before widget close
onEventFunctionfalseAction to perform on widget event

View a complete list of customizable options here

Okra.buildWithShortUrl Options

NameTypeRequiredDescription
short_urlStringtrueYour generated url from our App builder.
onSuccessFunctionfalseAction to perform after widget is successful
onCloseFunctionfalseAction to perform if widget is closed
onErrorFunctionfalseAction to perform on widget Error
BeforeCloseFunctionfalseAction to perform before widget close
onEventFunctionfalseAction to perform on widget event

Done connecting?

Checkout our API Overiview and see how to use the data you've received and other products you can use to create more personalized experiences for your customers!

Not a developer?

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

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

Other information

For enquires and questions, contact

  • support@okra.ng
0.1.4

6 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.1.3

9 months ago

0.1.0

1 year ago