Flutter

Learn how to integrate your app with the Okra Widget Flutter SDK

Overview

The Okra Widget SDK is a quick and secure way to link bank accounts to Okra in your Flutter app.
Okra Widget is a drop-in module that handles connecting a financial institution to your app (credential validation, multi-factor authentication, error handling, etc). All without passing sensitive personal information to your server.


Requirements

  • Check out 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.

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

To use this plugin, add okra_widget as a dependency in your pubspec.yaml file.

dependencies:
 okra_widget: ^2.0.9

On iOS, opt-in to the embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value true.

<dict>  
  <key>io.flutter.embedded_views_preview</key>
  <true/>  
</dict>

Usage

var banks = [
                    "ecobank-nigeria",
                    "fidelity-bank",
                    "first-bank-of-nigeria",
                    "first-city-monument-bank",
                    "guaranty-trust-bank",
                    "access-bank",
                    "unity-bank",
                    "alat",
                    "polaris-bank",
                    "stanbic-ibtc-bank",
                    "standard-chartered-bank",
                    "sterling-bank",
                    "union-bank-of-nigeria",
                    "united-bank-for-africa",
                    "wema-bank",
                    "rubies-bank",
                    "kuda-bank"
                  ];
                  
                  Okra.buildWithOptions(
                      context,
                      key: "3f52ee9d-f081-55a7-a9d8-73d4b5878bd2",
                      token: "5da6358130a943486f33dced",
                      color: "#3AB795",
                      products: [
                        'auth','identity','balance','transactions'
                      ] ,
                      chargeAmount: 1000,
                      chargeNote: "testing",
                      chargeType: "one-time",
                      chargeCurrency: "NGN",
                      environment: "production",
                      clientName: "clientName",
                      logo: "https://dash.okra.ng/static/media/okra-logo.514fd943.png",
                      limit: 3,
                      currency: "NGN",
                      isCorporate : false,
                      connectMessage : "Which account do you want to connect with?",
                      callbackUrl : "",
                      redirectUrl : "",
                      widgetSuccess : "Your account was successfully linked to SwipeNG",
                      widgetFailed : "An unknown error occurred, please try again.",
                      guarantors : {
                        "status": false,
                        "message": "Okra requires you to add guarantors",
                        "number": 3,
                      },
                      filters : {
                        "industry_type": "all",
                        "banks": banks
                      },
                      onSuccess: (data) {
                        print("Success");
                        print(data);
                      },
                      onError: ( message) {
                        print("error");
                        print(message);
                      },
                      onClose: (message) {
                        print("close");
                        print(message);
                      }
                  );

//Build with short Url

Okra.buildWithShortUrl(
                      context,
                      shortUrl: "7IF1Kwn8v",
                      onSuccess: (data) {
                        print("Success");
                        print(data);
                      },
                      onError: ( message) {
                        print("error");
                        print(message);
                      },
                      onClose: (message) {
                        print("close");
                        print(message);
                      }
                  );

🚧

For more options, view a complete list of customizable options here

Not a developer?

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


What's Next

Checkout how you can integrate our Android, Flutter, IOS and React Native SDK in the links below