Google Pay in Flutter

In case it helped :)

We will cover briefly:

1. What is Google Pay
2. Integration of Google Pay
3. Payment results
4. UI elements

What is Google Pay

Google Pay (known as G Pay) is a digital wallet platform and online payment system developed by Google to power in-app, online, and in-person contactless purchases on mobile devices. Users in the United States and India can also use an iOS device, albeit with limited functionality. In addition to this, the service also supports passes such as coupons, boarding passes, campus ID cards, car keys, event tickets, movie tickets, public transportation tickets, store cards, health records, and loyalty cards.

Google Pay logo

How it works

Inside the app, when a user taps the Google Pay button, they see a payment sheet that displays the payment methods saved to their Google Account. Users can quickly select a payment method, add an optional shipping address, or add new information before finalizing the payment.

Google Pay payment flow

1. The user taps the G Pay button and sees a payment sheet with a list of supported payment methods.
2. The user selects a payment method and G Pay returns a payment token for the selected method to the app.
3. The app submits the payment token to the backend
4. The backend processes the purchase and sends the payment token to the Payment Service Provider (PSP)

G Pay integrates with these payment processors (PSP).

Integration of Google Pay

We will be looking to the pay package for integration of Google Pay. This package takes care of both Apple Pay and Google Pay.

Under the hood, this package uses the Google Pay API. The things required to set up the Pay API will eventually be required to integrate the pay package

Setup:

• Check out their integration requirements here. It basically mentions their environments, brand guidelines, and other stuff.
• Check out their request for production access here, wherein you set up access to Google Wallet API and other checklists.

Now comes the setting up of your code.

• Internally Google API requires the following Gradle dependency (from android native) which is handled by the

implementation "com.google.android.gms:play-services-wallet:18.0.0"

Hence, we need to change the following in the build.gradle of your app

minSdkVersion 19
compileSdkVersion 31

• Include the package inside your pubspec.yaml

# pubspec.yaml
dependencies:
  pay: ^1.0.10

ess to the GooglePayButton and the ApplePayButton

GooglePayButton

Google Pay Button

It’s a widget to show the Google Pay button according to the rules and constraints specified in PayButton.

This widget provides an alternative UI-based integration path that wraps the API calls of the payment libraries and includes them as part of the lifecycle of the widget. Hence:

• The widget only shows if the Pay.userCanPay method returns true.

For instance, in case the code was running on iOS, then instead ApplePayButton will be shown (provided you have set up the ApplePay configuration).

• And tapping the button automatically triggers the Pay.showPaymentSelector method which starts the payment process.

This is what the GooglePayButton looks like.

Note: GooglePayButton

GooglePayButton(
  paymentConfigurationAsset: 'google_pay_config.json',
  paymentItems: _paymentItems,
  style: GooglePayButtonStyle.black,
  type: GooglePayButtonType.pay,
  margin: const EdgeInsets.only(top: 15.0),
  onPaymentResult: onGooglePayResult,
  loadingIndicator: const Center(
    child: CircularProgressIndicator(),
  ),
)

PaymentConfiguration

In the above snippet, we see PaymentConfiguration which is a required parameter. This parameter holds the information about a payment transaction.

It loads the configuration information needed for the payment transaction, which is based on the source. There are 2 options available for this:

• from a remote server

PaymentConfiguration.fromJsonString(
    '{"provider": "apple_pay", "data": {}}');

• folder like this

PaymentConfiguration from asset

Inside PaymentConfiguration

• The PaymentConfiguration is a JSON in which each parameter stands for a request object as per the Google Pay

{
   "provider":"google_pay",
   "data":{
      "environment":"TEST",
      "apiVersion":2,
      "apiVersionMinor":0,
      "allowedPaymentMethods":[
         {
            "type":"CARD",
            "tokenizationSpecification":{
               "type":"PAYMENT_GATEWAY",
               "parameters":{
                  "gateway":"example",
                  "gatewayMerchantId":"gatewayMerchantId"
               }
            },
            "parameters":{
               "allowedCardNetworks":[
                  "VISA",
                  "MASTERCARD"
               ],
               "allowedAuthMethods":[
                  "PAN_ONLY",
                  "CRYPTOGRAM_3DS"
               ],
               "billingAddressRequired":true,
               "billingAddressParameters":{
                  "format":"FULL",
                  "phoneNumberRequired":true
               }
            }
         }
      ],
      "merchantInfo":{
         "merchantId":"01234567890123456789",
         "merchantName":"Example Merchant Name"
      },
      "transactionInfo":{
         "countryCode":"US",
         "currencyCode":"USD"
      }
   }
}

• n either be apple_pay or google_pay
• data : This is the core of the PaymentRequest which is a JSONObject itself
• environment : This can either be TEST or PRODUCTION

There is a Test Card Suite provided by Google, which can only be used inside the TEST environment. For getting access to these test cards, join here

The test environment supports the 

1. Visa, Mastercard, Discover, and Amex card networks
2. PAN_ONLY and CRYPTOGRAM_3DS authentication methods

• apiVersion : The value is 2 for this specification.
• apiVersionMinor : The value is 0 for this specification.
• allowedPaymentMethods : This is of type PaymentMethod and specifies the support for one or more payment methods supported by the G Pay API.

PaymentMethod

This comprises 3 properties:

1. type : CARD is the only supported value for this parameter

2. tokenizationSpecification This is of type TokenizationSpecification and has two properties

TokenizationSpecification

• type : For CARD payment method, use PAYMENT_GATEWAY.
• parameters : Comprises a Gateway object which has two properties gateway and gatewayMerchantId.

Note: The values for Gateway depend on the supported gateway

3. parameters This is of type CardParameter and has 2 required and 5 optional parameters

CardParameter

• allowedAuthMethods (required): A string array of fields that are supported to authenticate a card transaction. PAN_ONLY and CRYPTOGRAM_3DS

Note: We can only use these 2 under TEST environment

• allowedCardNetworks (required): One or more card networks that you and Google Pay API support. eg AMEX, DISCOVER, INTERAC, JCB, MASTERCARD, VISA
• billingAddressRequired : Set to true if you require a billing address. This can increase friction.
• billingAddressParameters : This is of type BillingAddressParameters and has 2 parameters

BillingAddressParameters

• format : Billing address format which is required to complete the transaction. eg MIN(Name, country code, and postal code) and FULL (long list of parameters)
• phoneNumberRequired : Set to true if a phone number is required to process the transaction.

• merchantInfo : This MerchantInfo object provides information about the merchant that requests payment data and comprises of 

merchantName: This name is rendered in the payment sheet. In the TEST environment, or if a merchant isn't recognized, a “Pay Unverified Merchant” message is displayed on the payment sheet.

• transactionInfo : This TransactionInfo object is used to present a payment authorization dialog. It comprises of

currencyCode (required) : ISO 4217 Alphabetic currency code

countryCode: ISO 3166–1 alpha-2 country code where the transaction is processed.

Payment Results

Once the G Pay button is clicked, it triggers the presentation of the payment sheet. Once the user makes a selection, the sheet closes a

{
   "apiVersion":2,
   "apiVersionMinor":0,
   "paymentMethodData":{
      "description":"YOUR CARD DESCRIPTION",
      "info":{
         "billingAddress":{
            "address1":"YOUR ADDRESS1",
            "address2":"YOUR ADDRESS2",
            "address3":"",
            "administrativeArea":"YOUR AREA",
            "countryCode":"YOUR COUNTRY",
            "locality":"YOUR LOCALITY",
            "name":"YOUR NAME",
            "phoneNumber":"YOUR PHONE NUMBER",
            "postalCode":YOUR POSTAL CODE,
            "sortingCode":""
         },
         "cardDetails":YOUR CARD DETAILS,
         "cardNetwork":"VISA"
      },
      "tokenizationData":{
         "token":"examplePaymentMethodToken",
         "type":"PAYMENT_GATEWAY"
      },
      "type":"CARD"
   }
}

• ion : The value is 2 for this specification
• apiVersionMinor : The value is 0 for this specification
• paymentMethodData : This value is of type PaymentMethodData and comprises 4 parameters

PaymentMethodData

If the selection is successful, the result is fulfilled with a PaymentData object including relevant information about the payment method selected:

• type : PaymentMethod type which was selected in the G Pay payment sheet
• description : This contains the user-facing message describing the payment method
• tokenizationData : This value is of type PaymentMethodTokentizationData and consists of 2 parameters

type : Type of tokenization applied to the selected payment method

token : Generated payment method token. eg PAYMENT_GATEWAY, DIRECT

• info : This comprises 3 parameters billingAddress, cardDetails, and cardNetwork

The billing address is present in the form of an Address Object. CardDetails are present in a string that represents the details of the card. This value is commonly the last four digits of the selected payment account number. 

CardNetwork is also a string that represents the payment card network of the selected payment. This value is one of the values present inside the format of allowedCardNetworks in CardParameters.

After Payment Result

You can now use this payment method information to perform the actual transaction. For instance, you can get the tokenizationData from the above response and extract the token from it.

Then, use this token to perform payment through your payment gateway. Check out the list of supported processors to find out more about specific implementation details on each processor.

UI Elements

GooglePayButton exposes one of the parameters called type (which is an enum) inside its definition. We can play with this param in order to display the Button as per the requirements. Following are the options provided:

1. GooglePayButtonType.pay (this is the default value)
2. GooglePayButtonType.book
3. GooglePayButtonType.buy
4. GooglePayButtonType.checkout
5. GooglePayButtonType.donate
6. GooglePayButtonType.order
7. GooglePayButtonType.plain
8. GooglePayButtonType.subscribe

For instance, in case you want the type to be GooglePayButtonType.subscribe then the result would be

Subscribe with GPay

If you prefer to have more control over each individual request and the button separately, you can instantiate a payment client and add the buttons to your layout independently, using RawGooglePayButton.

RawGooglePayButton(
  onPressed: onGooglePayPressed,
  style: GooglePayButtonStyle.white,
  type: GooglePayButtonType.plain,
)

The result of this button is

RawGooglePayButton

Once the user clicks this button, you can initiate the request using the Pay.withAssets which is an alternative to a Pay object with

// PayClient
Pay _payClient = Pay.withAssets([
  'YOUR_GOOGLE_PAY_JSON_FILE',
])
// On the Button Pressed
void onGooglePayPressed() async {
  final result = await _payClient.showPaymentSelector(
    provider: PayProvider.google_pay,
    paymentItems: _paymentItems,
  );  
}

The response which is the Google Pay token can be sent to your server / PSP

Source code.

In case it helped :)