Integrate Flutterwave into your Flutter App.

Payments are always an integral part of Businesses and it becomes a menace when payments are made to the wrong individuals or making overpayments to the right people. As developers, payment integration is one of those key topics that require extra keenness, to make sure that payments are done correctly at the same time making sure that the payments are secure and are sent to the right receivers. But how can you make these integrations in cases where a merchant would like to make/receive payments from clients in various locations but has limited options on how to do so seamlessly?

There are many ways of making these integrations using various payment service providers, However, in this tutorial, am gonna show you how to integrate Flutterwave, a payment service provider which offers various payment options, with a Flutter App.

Note: This article assumes you already know the basics of Flutter, in case you are new to Flutter, check out this article:

How to get started on fun Flutter.

What’s Flutterwave?

Flutterwave is a payment service provider that offers various services to send and receive payments. If you are a business owner, you can collect payments from your clients using Flutterwave’s variety of options like:

• Bank transfers
• Mobile money
• Debit and credit cards
• POS
• Bank account
• Visa QR
• USSD
• Mpesa(Kenya).

To learn more about Flutterwave and what it offers, check out its official Documentation below:

Introduction

Before integrating Flutterwave in your app, first, you’ll look at the integration options that Flutterwave has.

Flutterwave integration options

Flutterwave Inline — This enables Businesses to use their Inline Javascript integration flow by embedding the FlutterwaveCheckout() JavaScript function into the code.

Flutterwave Standard — This shows you how to accept payments using the Flutterwave standard integration flow using their /payments endpoint.

Direct Charge API — This guides on performing Direct API card charges on Flutterwave.

Payments Links — Payment links allow merchants to accept payments on their site without the need to integrate. This is great for Individuals and merchants who don’t have developer resources.

HTML Checkout — This document will show you how to collect payments from your customers using Flutterwave inline in an HTML file

Getting Started

Create a Flutterwave account.

Navigate to the Flutterwave home Page and create an account if you have none yet.

https://flutterwave.com/us

Login into your Flutterwave account.

Upon account creation, login to your Flutterwave account where you will be able to see your dashboard.

The dashboard contains various account details items that you can explore like transactions, transfers, sub-accounts, billing options, payments plans, invoices among others.

See the overview of the Dashboard in the image below(Currently using the TestMode):

The dashboard helps you to play around with integrations on Test Mode and when ready to do live operations you can switch to ‘live mode’.

In this article, we will use the flutter + flutterwave plugin whose implementation mimics the Flutterwave Inline method of Payment integration.

STEPS:

1. Create a Sample Flutter Project

Let's create our demo app. On the terminal, type in the $ flutter create Command followed by the name of the app. In this case, we’ll use the name flutterwave_flutter_app.

$ flutter create flutterwave_flutter_app

2. Remove the pre-generated code

After successfully creating the flutter+flutter wave sample app, in main.dart file, remove the default generated code, and replace it with the code below:

(This step assumes you have a basic Idea of Flutter projects structure). If you are new to Flutter, please check the Official Flutter Documentation.

The above code displays a simple UI with a ‘Flutter +Flutterwave’ title and a button at the center of the interface that will initiate payment with Flutterwave.

3. Add the Flutterwave Package in the pubspec.yml

flutterwave: ^1.0.1

Always make sure to copy the package version from the Pub dev to capture the latest package.

4. Import the Flutterwave package in the main.dart file

import 'package:flutterwave/flutterwave.dart';

5. Create a FlutterWave instance.

Create the Flutterwave instance by calling Flutterwave.forUIPayment() constructor.

The constructor accepts a mandatory instance of the following details :

Context , publicKey, encryptionKey, amount, currency, email, fullName, txRef, isDebugMode and phoneNumber .

And this will return an instance of Flutterwave .

Well, since there are some required params, Let's adjust the UI to make the user only fill in the necessary details like email, amount, full name, and phone number from the UI input fields when making the payment.

NB: If you are expecting Flutterwave payments from users with different currencies, you can add the currency input field in the UI.

However, if you just want to use one currency, you can pre-configure it in the code so that the user doesn't have to fill it in every time they are making a Flutterwave payment.

With these new additions, this is how your code will be:

The code above has some input fields that will enable the user to fill before making a payment with Flutterwave like email, amount, full name, and phone number. It also has a simple validation to prevent null values from being submitted when initiating the payment since these values are required parameters.

Next, create a method that will be used to configure the following values for the Flutterwave instance and this includes:Context , publicKey, encryptionKey, amount, currency, email, fullName, txRef, isDebugMode and phoneNumber .

You can use your preferred name for the method. In this example, am using _makeFlutterwavePayment().

Public Key and Encryption Keys required can be retrieved from your Flutterwave account Dashboards shown in the image below:

public key and encryption key

In the above image, am using my TestMode public and Encryption Keys.

Remember never to check your secret keys to Git. If you don't know how to do so, feel free to check this article for guidance.

See the full code of creating Flutterwave instance below:

Note: In this Demo, we are going to Test the Flutterwave payment with Mpesa, since I have a Kenyan phone number that accepts payments through Mpesa, and that's why acceptMpesaPayment, is set to true in line 26 in the above method.

However, you can set to true other payments that you would like to test with depending on your country and the Type of payment acceptable.

If you would like to test CardPayment as well, feel free to set it to true.

6. Handle the response

Next, add a response immediately below the Flutterwave instance which returns an instance of Flutterwave which we then call the async method .initializeForUiPayments() on.

See the sample code below:

7. Making a payment to Flutterwave.

Now that you have created the Flutterwave instance and response, call the _makeFlutterwavePayment method you created above (in step 6) on the onPressed() function, to execute payment when the button is pressed.

See the code below:

And Yaay we are done with the Code implementation.

You can find the complete code on my github page as well as my code gists, incase you missed anything along the way.

8. Flutterwave payment confirmation

Now run your sample Flutterwave Flutter app that we just built in the above instructions and fill in the UI payments details as a test user. See the image below:

Then press the Pay with Flutterwave Button, you should now be able to initiate a payment. This will only show one Payment option which is Mpesa since that is what we set. Check the screenshot below.

This will trigger Transaction verification as shown below:

Sample Demo

flutterwavedemo

After making the payment, You will receive an email of the Transaction report done by the client who has paid with Flutterwave. Check the screenshot below.

You can as well get a list of all transactions made to your Flutterwave account in the Flutterwave dashboard as shown below:

Conclusion.

In this tutorial, you have learned how to integrate Flutterwave in a Flutter app using the Flutterwave Inline method. And how to confirm that you receive the payments as a merchant from your clients seamlessly using the Mpesa Payment option.

Thank you 😍

Happy Fluttering 🙌.

Should you have any questions, feel free to ping me on Twitter or on the comment sections below.