Google Pay in Flutter

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.

How it works

When a user taps the Google Pay button in any app, 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 (PSPs).

Integration of Google Pay

We will be looking at the pay package for the 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 the access to the Google Wallet API and other checklists.

Now, let's set up your code.

Internally, the Google API requires the following Gradle dependency (from android native) which is handled by the pay package:

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:

• Include the package inside your pubspec.yaml

Now you have access to the GooglePayButton and the ApplePayButton.

GooglePayButton

GooglePayButton is a Flutter 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, if the code is running on iOS, then ApplePayButton will be shown (provided you have set up the ApplePay configuration).

• Tapping the button automatically triggers the Pay.showPaymentSelector method, which starts the payment process.

This is what GooglePayButton looks like:

Note: GooglePayButton extends from PayButton

Payment Configuration

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 two options available for this:

1. From a remote server, like this:
2. From the assets folder, like this:

Inside PaymentConfiguration

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

• provider: This can 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
• 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.

Payment Method

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 (explained below)
3. parameters: This is of the type CardParameter and has 2 required and 5 optional parameters (explained below)

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.

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 two under a TEST environment.

• allowedCardNetworks (required): One or more card networks that you and the Google Pay API support, e.g., AMEX, DISCOVER, INTERAC, JCB, MASTERCARD, or VISA.
• billingAddressRequired: Set to true if you require a billing address. This can increase friction.
• billingAddressParameters: This is of the type BillingAddressParameters and has two parameters (explained below).
• 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, the name 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 a currencyCode (required), an ISO 4217 Alphabetic currency code, and a countryCode, an ISO 3166–1 alpha-2 country code where the transaction is processed.

BillingAddressParameters

• format: The billing address format, which is required to complete the transaction, e.g., MIN(Name, country code, and postal code) and FULL (long list of parameters).

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 and you receive the result inside onPaymentResult.
• apiVersion: The value is 2 for this specification
• apiVersionMinor: The value is 0 for this specification
• paymentMethodData: This value is of type PaymentMethodData and comprises four parameters:

PaymentMethodData

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

• type: PaymentMethod type that 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 two parameters (explained below)
• info: This comprises three 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.

PaymentMethodTokentizationData

1. type: Type of tokenization applied to the selected payment method
2. token: Generated payment method token, e.g. PAYMENT_GATEWAY, DIRECT

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, if you set the type to GooglePayButtonType.subscribe, the result would be:

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

The result of this button is:

Once the user clicks this button, you can initiate the request using Pay.withAssets, which is an alternative to a Pay object with a list of configurations in String format.

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

Use Pieces to Store Your Flutter Snippets

When developing Flutter applications, you may have tons of widgets you save that you want to reuse later, but you just do not have them in a safe place where you can access them. There also may be the scenario where you are combing through Flutter and Dart documentation, and you want to save examples that come in handy when implementing a new feature or figuring out which widget to use for different circumstances.

Pieces helps you save all your useful code snippets efficiently through a desktop application and integrations. Using Pieces, you can save any code snippets from StackOverflow with the click of a button using the chrome extension, have your code autosaved from locally-hosted ML algorithms that recognize your code patterns, auto-classify snippets by language, share code with others using generated links, and more! The Pieces’ suite is continuously being developed, and there’s some groundbreaking stuff that is being put together to share, reuse, and save code snippets.