Flutter

Overview

The Okra Widget SDK is a quick and secure way to link bank accounts to Okra through your Flutter app. The Widget is a drop-in module that handles credential validation, MFA, and error handling for each financial institution that Okra supports, all without passing sensitive personal information to your server.

Follow these steps to integrate the Okra Widget into your Flutter application on Android and iOS using Okra's Flutter SDK.

Install the Flutter SDK

Add okra_widget_official as a package dependency in your pubspec.yaml file:

dependencies:
 okra_widget_official: ^3.1.13

If your application is for iOS, opt in to the embedded views preview and enable arbitrary loads by adding the following configuration to your application'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>

Customize your Widget

Okra enables you to create a Widget experience that best fits your use case and business needs. You have the flexibility to fine-tune user interface elements like button texts and company branding. You can also determine what financial institutions you want your users to see when they connect their accounts, and set up the products that you want to retrieve data for.

📘
You can build your Widget in the App Builder without writing any code - visit the Customization guide for more details.

Integrate your Widget

After you have customized your Widget experience, you have 2 options to integrate the Widget into your app or website: building with short_url, and building with options.

📘
Visit the Integration guide to understand the 2 integration options.

Sample code

Okra.buildWithOptions(
        context,
        key: dotenv.env['key']!, // Your API key.
        token: dotenv.env['token']!, // Your client token.
        color: "#3AB795",
        products: ['auth', 'identity', 'balance', 'transactions'],
        chargeAmount: 100,
        chargeNote: "testing",
        chargeType: "one-time",
        chargeCurrency: "NGN",
        environment: "production-sandbox", // The environment you want to use. Use production-sandbox for testing.
        clientName: "clientName",
        logo: "https://dash.okra.ng/static/media/okra-logo.514fd943.png",
        limit: 3,
        meta: "Test Meta", // The metadata you want to include.
        options: {
          "name": "Flutter Options Test"
        },
        currency: "NGN",
        isCorporate: false,
        showBalance: true,
        geoLocation: true,
        payment: false,
        connectMessage:
        "Which account do you want to connect with?",
        callbackUrl: "https://webhook.site/{id}", // The URL that Okra can send webhooks to.
        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,
        },
        filter: {"industry_type": "all", "banks": banks},
        onSuccess: (data) {
          print("Success");
          developer.log('$data');
        }, onError: (message) {
          print("error");
          print(message);
        }, onClose: (message) {
          print("close");
          print(message);
        },
        onEvent: (message) {
          print("event");
          print(message);
        }
    );

Okra.buildWithShortUrl(
                        context,
                        shortUrl: "bc_kWKf2l", // Your short_url.
                        onSuccess: (data) {
                          print("Success");
                          print(data);
                        },
                        onError: ( message) {
                          print("error");
                          print(message);
                        },
                        onClose: (message) {
                          print("close");
                          print(message);
                        }
                    );

Need help?

Check out the Widget Errors and the API Errors guide to understand the different error scenarios.
Join Okra's Developer Community on Slack if you have technical questions or need help with your code.
Get in touch with the Support team if you have any questions about Okra's products.