Nowadays every business is coming online to reach their customers easily and also increase the number of customers. So, for working everything smoothly businesses are trying to make everything digital and then the payment method comes into play.

Every business handles their customers by their website or by their mobile applications and if we talk about the flutter then it develops both mobile apps and websites. So no need to worry about handling the payment integration on both platforms if you are developing your websites or apps by using the flutter framework because flutter works on a single code base for multiple platforms.

So, in this blog, we will cover how we can integrate payment methods into our code.

A few days ago when Google IO happened (18 May 2021 – 20 May 2021) then they launched the official package for google pay(for android) and apple pay integration (For iOS).

pay(current version : 1.0.4) 

In this blog, we will mainly focus on Google pay

So, before you start working on the “pay” package. There are few prerequisites that you must have to follow:

1. i) you must have a google pay business account and if you don’t have then you can create by going to this link: https://pay.google.com/business/console/
2. ii) You must look into the integration requirements: https://developers.google.com/pay/api/android/overview

Now coming to the main point:

=> To start using the plugin you must add the dependency into your pubspec.yaml file.

dependencies:

   pay: ^1.0.4

=> Payment configuration

You have to make a payment profile with your desired payment by loading it from the server or by fetching it from the local. You can find an example from here: https://developers.google.com/pay/api/android/reference/request-objects#PaymentDataRequest

• So, all done coming to the code part.

=> you have to import the package by import ‘package: pay/pay.dart’;

 And then you can start implementing the payment method.

Below is the official example of integration :

import 'package:pay/pay.dart';

const _paymentItems = [

  PaymentItem(

    label: 'Total',

    amount: '99.99',

    status: PaymentItemStatus.final_price,

  )

];

ApplePayButton(

  paymentConfigurationAsset: 'default_payment_profile_apple_pay.json',

  paymentItems: _paymentItems,

  style: ApplePayButtonStyle.black,

  type: ApplePayButtonType.buy,

  margin: const EdgeInsets.only(top: 15.0),

  onPaymentResult: onApplePayResult,

  loadingIndicator: const Center(

    child: CircularProgressIndicator(),

  ),

),

GooglePayButton(

  paymentConfigurationAsset: 'default_payment_profile_google_pay.json',

  paymentItems: _paymentItems,

  style: GooglePayButtonStyle.black,

  type: GooglePayButtonType.pay,

  margin: const EdgeInsets.only(top: 15.0),

  onPaymentResult: onGooglePayResult,

  loadingIndicator: const Center(

    child: CircularProgressIndicator(),

  ),

),

void onApplePayResult(paymentResult) {

  // Send the resulting Apple Pay token to your server / PSP

}

void onGooglePayResult(paymentResult) {

  // Send the resulting Google Pay token to your server / PSP

}

 

Note:  if you run your app into the iOS device then you can see only the apple pay button and when you run your app into the android device then you can see only the google pay button.

For more info go to: https://pub.dev/packages/pay

************************************************************************************************************

Now there are some more payment gateways that you knew like Razorpay, Billdesk, etc.

Razorpay also provides you the official flutter package for payment integration.

razorpay_flutter(current version : 1.2.6)

Now there are also prerequisites that you have to follow while implementing Razorpay.

1. i) You must have an account on Razorpay.
2. ii) Generate API keys in test mode and when you are done with your testing part then generate the live mode API key from the dashboard and change it into your code for live payment acceptance.

If you are done with prerequisites then you are good to go and follow the below steps.

i) Add the dependency into your pubspec.yaml file.

                      razorpay_flutter: ^1.2.3

ii) Import the Razorpay package into your project:

                     import ‘package:razorpay_flutter/razorpay_flutter.dart’;

iii) Create Razorpay instance:

                     _razorpay = Razorpay();

iv) Attach Event Listeners:

When a payment fails or succeed then events will trigger:

                    _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS,                                                                            _handlePaymentSuccess);_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR,                              _handlePaymentError);_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET,                                _handleExternalWallet);

This handler will be defined in the class as :

void _handlePaymentSuccess(PaymentSuccessResponse response) {

   // Code your logic when payment succeed

}

void _handlePaymentError(PaymentFailureResponse response) {

   // Code your logic when payment fails

}

void _handleExternalWallet(ExternalWalletResponse response) {

   // Code when external wallet is selected

}

Also not forget to clear event listeners when your task is done.

_razorpay.clear(); // Removes all listeners

v) Create an order in server :

'{

     "amount": 50000,

     "currency": "INR",

     "receipt": "rcptid_11"

 }'

 

You have to pass some important key-value pair like amount, currency format, and order

Receipt.

1. vi) Add checkout options:

You will receive the order id from the server and pass-in options.

var options = {

   'key': '<YOUR_KEY_ID>',

   'amount': 50000, //in the smallest currency sub-unit.

   'name': 'Acme Corp.',

'order_id': 'order_EMBFqjDHEEn80l', // Generate order_id using Orders API

   'description': 'Fine T-Shirt',

   'timeout': 60, // in seconds

   'prefill': {

     'contact': '9123456789',

     'email': 'gaurav.kumar@example.com'

   }

};

 

vii) Open checkout :

    _razorpay.open(options);

viii) Store fields in server:

Successful payment returns the value that you will store into your server.

{

   "razorpay_payment_id": "pay_29QQoUBi66xm2f",

   "razorpay_order_id": "order_9A33XWu170gUtm",

   "razorpay_signature":       "9ef4dffbfd84f1318f6739a3ce19f9d85851857ae648f114332d8401e0949a3d"

}

ix) Verify payment signature:

The signature that you received must have verified the authenticity of the details.

So, to verify the signature you have to follow the below details:

1.  Create a signature using order_id, razorpay_payment_id, and key_secret(fetching by dashboard).
2.  Use the SHA256 algorithm, the razorpay_payment_id, and the order_id to construct an HMAC hex digest as shown below:

generated_signature = hmac_sha256(order_id + "|" + razorpay_payment_id, secret);

  if (generated_signature == razorpay_signature) {

    payment is successful

  }

  3. If the signature you generated matches your razorpay_signature then it is an authentic source of payment.

• So, all done you are good to go.
• For more details about Razorpay payment integration you can check out this link: 

https://razorpay.com/docs/payment-gateway/flutter-integration/#step-1-install-the-razorpay-flutter-plugin