Integrate PayHere with your Flutter app
First of all, let me explain what is PayHere. For decades, Sri Lanka lacked a reliable internet payment option as a country. While many nations were transitioning to an era of eCommerce and digital payments, Sri Lanka was left far behind due to this crucial payment hurdle. Local companies waited on bogus promises of overseas payment solutions that never materialized. At that point, PayHere was founded in 2016, with the goal of closing the Online Payments Gap.
PayHere currently empowers over 3200 local businesses at all levels, from startups to big brands, by processing over 4 billion rupees in online payments.
Recently PayHere released the Flutter SDK which allows Flutter developers to work with PayHere easily. In this article, I will explain the steps to integrate PayHere with Flutter applications. The official documentation is also available here.
1. Setup the Flutter project
I am not going to explain the steps to create a flutter project here. Let’s see what we have to do after creating the project.
First, open the pubspec.yml file, add the PayHere Flutter SDK dependency payhere_mobilesdk_flutter: ^1.0.4 and run flutter pub get command. SDK version may be updated so check out the official documentation too.
To Set Android Pre-requisites. Open up the build.gradle file in the android directory and add the repository.
allprojects {
repositories {
maven {
url “https://repo.repsy.io/mvn/payhere/payhere-mobilesdk-android/"
}
mavenLocal()
}
}To allow Manifest attribute merge, Open the AndroidManifest.xml file in android > app > src > main and do the following changes. Declare the Android tools namespace in the element.
<manifest xmlns:android=”http://schemas.android.com/apk/res/android" package=”com.domain.name” xmlns:tools=”http://schemas.android.com/tools">Then add the ‘replace’ merge rule for the ‘android:label’ attribute in the element.
<application tools:replace=”android:label”>To set iOS Pre-requisites run pod install command in your iOS project. If you are not on a Mac device, then this step can be skipped.
2. Setup PayHere account (Sandbox account)
To create a PayHere Merchant account we must have a registered business and there are some legal thingies. For testing purposes, we can create a sandbox account. Sandbox is a test environment where you may familiarize yourself with PayHere Merchant Portal and test integrations with your website. It’s a different clone of the Live PayHere platform that allows you to see how the Live platform works before applying for a Live account.
2.1 Create a Sandbox account
To create a PayHere sandbox account go to https://sandbox.payhere.lk/ and signup. Enter an email and password in the first step, then verify the email by the OTP send to the email. Then we can sign in.
After signing in for the first time we have to enter some additional information before proceeding further. We can add fake Business Name and Business Web site in this part to Complete the sandbox account.
2.2 Whitelist mobile app package name
Now go to Settings in your sandbox account and navigate to Domains & Credentials page (under integration settings at the left side of the page). Notice there, we can see the Merchant ID, we need it in the future steps.
On this page, click Add Domain/App button. It will open up a form. In the first field, select “App” instead of “Domain”. Then enter something for the Brand Name. It doesn’t matter what you enter here.
For the App Package Name, we have to enter the package name of our application. To find it, go to android > app > open build.gradle file in the project directory. There you can find the applicationId. Copy it and paste as it is on App Package Name field.
Then keep the secret for future use and tick all the checkboxes. Click Request to Allow button.
In a real Merchant account, this will take some time to approve the app but in a sandbox account, it will approve instantly. You can see a green tick mark next to the app package name when it is approved.
3. Initiate a Payment Request
Now the PayHere account and Flutter application are all set. I will show you an example for how to do a simple One-Time Payment from our app. Look at the following code. I took it from the official documentation and changed a bit to avoid any confusion.
import ‘package:payhere_mobilesdk_flutter/payhere_mobilesdk_flutter.dart’;class PaymentService { Map<String, dynamic> paymentObject = {
“sandbox”: true, // true if using Sandbox Merchant ID
“merchant_id”: “<MERCHANT_ID>”, // Replace your Merchant ID
“merchant_secret”: “”,
“notify_url”: “http://sample.com/notify",
“order_id”: “ItemNo12345”,
“items”: “Hello from Flutter!”,
“amount”: “50.00”,
“currency”: “LKR”,
“first_name”: “Saman”,
“last_name”: “Perera”,
“email”: “samanp@gmail.com”,
“phone”: “0771234567”,
“address”: “№1, Galle Road”,
“city”: “Colombo”,
“country”: “Sri Lanka”,
“delivery_address”: “№46, Galle road, Kalutara South”,
“delivery_city”: “Kalutara”,
“delivery_country”: “Sri Lanka”,
“custom_1”: “”,
“custom_2”: “”
}; void pay() {
PayHere.startPayment(paymentObject, (paymentId) {
print(“One Time Payment Success. Payment Id: $paymentId”);
}, (error) {
print(“One Time Payment Failed. Error: $error”);
}, () {
print(“One Time Payment Dismissed”);
});
}
}
PayHere.startPayment method will send a request to the PayHere payment gateway. The data about the transaction includes in paymentObject. We must replace the <Merchant ID> with our account’s Merchant ID. And we can add merchant_secret of our app, but it’s not necessary we can keep it as an empty string. In a real app we have to populate the values of paymentObject dynamically but for simplicity let’s hard code the values.
Now just call the pay() method to proceed a payment on a button on press or any action. Then it will open a popup to select the payment method. As an example, if we select Visa we the screen to enter card details will pop up.
As we are using the sandbox account the transactions are not real. So we cannot enter real card details to do a payment it will be a failure request. You can use the following test card numbers to test simulated successful payments.
- Visa : 4916217501611292
- MasterCard : 5307732125531191
- AMEX : 346781005510225
We can enter any valid data for ‘Name on Card’, ‘CVV’ & ‘Expiry date’.
So that’s it for this article. Hope this will help anyone who trying PayHere for the first time with Flutter, like me :D Please feel free to point out if there’s anything wrong and more information. Also, check out the PayHere documentation and other cool features. Lastly, I would like to thank the PayHere team for helping me to find some missing pieces.
Happy Coding Folks 👽
