Flutter

This document presents the steps for integrating the Geidea payment gateway with your mobile application (app).

Overview

Flutter is an open-source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. The Geidea Online Payments SDK is a wrapper that extends the Geidea Payment Gateway, allowing you to take payments through Geidea. You can easily accept credit card payments and other payments through wallet providers.

Integrating our payment gateway with your mobile apps created with Flutter has never been easier. Through the Geidea Online Payments SDK, our payment gateway can be seamlessly integrated with just a few lines of code.

Pre-requisites

You will need a merchant account with Geidea and the following software running on your development environment to integrate your mobile app with the Geidea Online Payments SDK.

❗️

While we make every effort to test software or module or plugin or SDK updates rigorously, there is no guarantee that a plugin or module or SDK would work seamlessly with your device. So please back up your mobile app before updating any plugins or modules or SDKs. This helps you restore your website from backup in case you run into unexpected errors.

Software and plugin or module or SDK updates involve programming code changes. The updates may often request upgrades to the development environment or other hosting software.

👍

Sample App Code

We have created a sample app and shared the code here. The code consists of samples for you to use to accelerate your app development.

A sample app with a lower version of Flutter (3.0.5) is available here.

Step 1 - Add the SDK to your mobile app project

The SDK is available on the GitHub repository. You can download the latest version (3.13.9) of the SDK from here.

📘

For a lower version of Flutter (3.0.5) please click here

Step 2 - Installing the SDK

1. Add the following code to your pubspec.yaml file

dependencies:
  geideapay:
    git:
      url: https://github.com/GeideaSolutions/Flutter-SDK
      ref: main # branch name

2. Execute the flutter pub get command to add the above package to your project

3. Add the following lines to import the necessary packages to your project

import 'package:geideapay/geideapay.dart';
import 'package:geideapay/models/address.dart';
import 'package:geideapay/widgets/checkout/checkout_options.dart';

Usage

Add your merchant credentials (Merchant Public Key and API password) received with the GeideapayPlugin.initialize() method.

final _plugin = GeideapayPlugin();

@override
void initState() {
	super.initState();
	_plugin.initialize(publicKey: "<YOUR MERCHANT KEY>",apiPassword: "<YOUR MERCHANT PASSWORD>");
}

IMPORTANT:

1. The initialize() method is used for setting credentials to the SDK. This method or the SDK does not store your credentials in any way. So it is required to set them on each app start event or anytime prior to calling thecheckout().
2. As a good security and coding practice, kindly do not hard-code your merchant password directly into your code. Always get it securely and dynamically (from the secure endpoint of your backend or some secure server) where the password has been stored with encryption.

Building your checkout experience

Address billingAddress = Address(
	city: "Riyadh",
	countryCode: "SAU",
	street: "Street 1",
	postCode: "1000");
Address shippingAddress = Address(
	city: "Riyadh",
	countryCode: "SAU",
	street: "Street 1",
	postCode: "1000");

CheckoutOptions checkoutOptions = CheckoutOptions(
	"123.45",
	"SAR",
    callbackUrl: "https://website.hook/", //Optional
    returnUrl: "https://returnurl.com", 
    lang: "AR", //Optional
    billingAddress: billingAddress, //Optional
    shippingAddress: shippingAddress, //Optional
    customerEmail: "[email protected]", //Optional
    merchantReferenceID: "1234", //Optional
    paymentIntentId: null, //Optional
    paymentOperation: "Pay", //Optional
    showAddress: true, //Optional
    showEmail: true, //Optional
    textColor: "#ffffff", //Optional
    cardColor: "#ff4d00", //Optional
    payButtonColor: "#ff4d00", //Optional
    cancelButtonColor: "#878787", //Optional
    backgroundColor: "#2c2222", //Optional
);

Calling the checkout method to open the payment screen

try {
	OrderApiResponse response = await _plugin.checkout(context: context, checkoutOptions: checkoutOptions);
	debugPrint('Response = $response');

	// Payment successful, order returned in response
	_updateStatus(response.detailedResponseMessage, truncate(response.toString()));
} catch (e) {
	debugPrint("OrderApiResponse Error: $e");
	// An unexpected error due to improper SDK
	// integration or Plugin internal bug
	 _showMessage(e.toString());
}