Google Pay Widget in Flutter

Google Pay, also known as G Pay, is a convenient digital wallet platform and online payment system that was created by Google. It allows users to make in-app, online, and in-person contactless purchases using their mobile devices. While the service is available globally, users in the United States and India can also use Google Pay on an iOS device, although its functionality is somewhat limited compared to Android devices. Google Pay also offers a handy feature called the "Google Pay widget". This widget can be added to the home screen of your Android device, providing quick access to the Google Pay app and making it even more convenient to use. With just a few taps, you can easily make a payment or access your stored passes and other digital information using the Google Pay widget.

In addition to being a payment platform, Google Pay 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. This means that users can keep all of their important digital information in one place, making it easy to access and use.

Overall, Google Pay is a versatile and convenient tool for making payments and managing various types of digital information all in one place.

How it works

Google Pay offers a simple and streamlined payment process when making purchases within an app. When a user taps the Google Pay button in any app, a payment sheet will appear. This payment sheet displays all the payment methods that are currently saved to the user's Google Account.

From there, users can easily select their preferred payment method from the list, without having to manually enter any payment details. If necessary, users can also quickly add a shipping address or enter new payment information before finalizing the payment.

This approach makes the payment process quicker and more convenient for users, as they can complete their transactions without having to leave the app or enter their payment details repeatedly. Overall, Google Pay's payment sheet offers a seamless and hassle-free payment experience for users.

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 Widget in Flutter

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:

Save to Pieces

• 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

Save to Pieces

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:

Save to Pieces

1. 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.

Google Pay in Flutter

Save to Pieces

• 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

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. If you are familiar with testing with Stripe, this process should be pretty familiar for you. The test environment supports Visa, Mastercard, Discover and Amex card networks, and 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

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.

Save to Pieces

• 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.

Save to Pieces

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‍

Save with Pieces

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

Use Pieces to Store Your Flutter Snippets | Google Pay Widget

When working on Flutter applications, you may come across widgets that you want to save and reuse later, but you may not have a safe place to store them. Additionally, while browsing through Flutter and Dart documentation, you may want to save examples that can be useful when implementing a new feature or deciding which widget to use for different scenarios.

This is where Pieces comes in! Pieces is a desktop application with integrations that helps you save all your useful code snippets efficiently. With Pieces, you can easily save any code snippets from StackOverflow by clicking a button using the chrome extension. Additionally, your code can be autosaved from locally-hosted ML algorithms that recognize your code patterns.

With auto-classification of snippets by language and the ability to share code with others using generated links, Pieces makes it easy to manage and share your code snippets. The Pieces suite is continuously being developed, and new features are being added to share, reuse, and save code snippets more effectively. Overall, Pieces is a powerful tool that can help you streamline your development process and make coding more efficient.