Okra Widget Flutter SDK
Flutter 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
- Setup Slack Notifications so you can see your API call statuses and re-run calls in real-time!
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
To use this plugin, add okra_widget as a dependency in your pubspec.yaml file.
dependencies:
okra_widget: ^3.1.14
On iOS, opt-in to the embedded views preview and also enable Arbitrary loads by adding the following configs to the app's Info.plist file
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
</dict>
Usage
Build with options
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",
customerBvn: "22188789177",
meta: "Dynamic data type",
options: {
"name": "Test Map"
}
logo:
"https://dash.okra.ng/static/media/okra-logo.514fd943.png",
limit: 3,
currency: "NGN",
isCorporate: false,
showBalance: true,
geoLocation: true,
payment: 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 shortUrl
Okra.buildWithShortUrl(
context,
shortUrl: "ns_aIEz8r",
onSuccess: (data) {
print("Success");
print(data);
},
onError: ( message) {
print("error");
print(message);
},
onClose: (message) {
print("close");
print(message);
}
);
Okra.buildWithOptions Options
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
app_id |
String |
true | Your app id from your Okra Dashboard. | |
okraKey |
String |
true | Your public key from your Okra Dashboard. | |
token |
String |
true | Your token from your Okra Dashboard. | |
env |
String |
false | production |
production(live)/production-sandbox (test) |
products |
Array |
true | ['Auth'] |
The Okra products you want to use with the widget. |
payment |
Booelan |
false | Whether you want to initiate a payment (https://docs.okra.ng/docs/payments) | |
charge |
Object |
false | Payment charge opject (https://docs.okra.ng/docs/widget-properties#set-up-payments) | |
products |
Array |
true | ['Auth'] |
The Okra products you want to use with the widget. |
logo |
String(URL) |
false | Okra's Logo | |
name |
String |
false | Your Company's name | Name on the widget |
color |
HEX |
false | #3AB795 | Theme on the widget |
limit |
Number |
false | 24 | Statement length |
filter |
Object |
false | Filter for widget | |
isCorporate |
Boolen |
false | false |
Corporate or Individual account |
connectMessage |
String |
false | Instruction to connnect account | |
widget_success |
String |
false | Widget Success Message | |
widget_failed |
String |
false | Widget Failed Message | |
callback_url |
String(Url) |
false | ||
currency |
String |
false | NGN | Wallet to bill |
exp |
Date |
false | Won't expire | Expirary date of widget |
options |
Object |
false | You can pass a object custom values eg id | |
onSuccess |
Function |
false | Action to perform after widget is successful | |
onClose |
Function |
false | Action to perform if widget is closed | |
onError |
Function |
false | Action to perform on widget Error | |
BeforeClose |
Function |
false | Action to perform before widget close | |
onEvent |
Function |
false | Action to perform on widget event |
View a complete list of customizable options here
Okra.buildWithShortUrl Options
| Name | Type | Required | Description |
|---|---|---|---|
short_url |
String |
true | Your generated url from our App builder. |
onSuccess |
Function |
false | Action to perform after widget is successful |
onClose |
Function |
false | Action to perform if widget is closed |
onError |
Function |
false | Action to perform on widget Error |
BeforeClose |
Function |
false | Action to perform before widget close |
onEvent |
Function |
false |
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
Other information
For enquires and questions, contact