How to Integrate Okra in Your Flutter App

Hey, you might have opened this article because you want to use Okra in your Flutter application, but you're unsure how to get started. Or maybe you are just curious. Whatever the case may be, you're in luck! In this piece, I'll be walking you through step-by-step instructions on how to get it done; spoilers - it's super easy 🎉

Definitions

Okra provides open finance infrastructure that enables developers and businesses to build personalized digital products and services for consumers in Africa.

Flutter is an open-source framework developed by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Prerequisites

This article is not an intro to Flutter, and it doesn't cover the basics. You'll need to be familiar with Dart and have a basic Flutter setup on your machine to get started.

To get started, you'll need to do the following things:

• Sign up with Okra (if you don't already have an account with Okra)
• Retrieve your Okra credentials - Client Token, API key
• Add the latest widget version to your pubspec.yaml file, as seen below

dependencies:
  flutter:
    sdk: flutter
  ....other dependencies
  okra_widget_official: ^3.0.1

• To install the newly added dependency, run this in your terminal at the root folder of your project

flutter run pub get

Let’s Get Started 🎉

Now that we have installed the dependency, time to integrate the Okra widget into our app. Note that we're using a demo app for this instruction; you can choose to have this implementation anywhere in your app, depending on your business logic. There are two ways you can build your widget, using the BuildwithShortUrl or BuildWithOptions.

BuildWithShortUrl

This method takes away the burden of customizing your widget in your text editor; instead, it allows you to leverage the Okra dashboard to customize the appearance and features of your widget. After customization, it presents a short URL, which is a vital link for the widget.

This method saves time, and it's a no-code option.

Depending on your logic, you can setup the function callOkraWidget in your controller or view model class with the necessary options and call it when needed, which would be most likely when your user triggers a call to action of your choice, in this case, the Raised Button.

BuildWithOptions

This method gives you the freedom to code by hand the necessary parameters required to kickstart the SDK.

Using BuildWithOptions lets you customize the appearance, features, and be creative. Hence, it's the best choice for a developer who wants to change their widget's look and feel frequently.

Depending on your logic, you can set up the function callOkraWidget in your controller or view model class with the necessary options and call it when needed, which would most likely be when your user triggers a call to action of your choice, in this case, the Raised Button.

Note that:

• key, token , clientName and products are required
• products must be a list of Strings
• environment defaults to "production-sandbox"
• All booleans default to false
• When payment is false, chargeType , chargeAmount , chargeNote & chargeCurrency will all be ignored.
• currency defaults to "NGN"
• color defaults to the Okra color code "#3AB795"
• limit defaults to 24
• To build a more personalized experience for returning users, all you have to do, is to provide any of these parameters customerId , customerBvn , customerPhone , customerEmail , or customerNin . Kindly note that only one of these parameters is needed and if you happen to provide more than one, only one valid param would be used in the order they’ve been listed above. To read more on Okra’s returning user experience please click here

Conclusion

I hope this guide helped you implement Okra in a Flutter project. We'd love to know how your integration with our SDKs is going, so feel free to buzz us on Slack.

Check out this repo for the entire project, and don't forget to star it.

Read our documentation to explore all of Okra's wonderful services. Or, if you want to try it out for yourself, sign up for a free account to start building with the Okra today.

If you are passionate about open finance, you can also visit our website to see all the services that might be appealing to you. Contact sales or send an email to sales@okra.ng to get started!