Viewing: developers.google.com

Page Summary

outlined_flag

Integrating Google Pay can enhance user experience by streamlining the checkout process and reducing manual entry.
Optimize for minimal clicks by setting Google Pay as the default payment method when possible and displaying a clear final price.
Strategically place Google Pay buttons on product and checkout pages, prioritizing its position for increased visibility and conversion.
Leverage Google Pay to collect necessary shipping and payment information, reducing user effort and improving checkout flow.
Ensure user privacy by only using Google Pay data for transaction-related purposes and obtaining explicit consent for any other use.

When you integrate with the Google Pay API, various scenarios can occur that are dependent on your website, app buyflow, and user experience (UX). To improve the UX, consider the following guidelines:

Set the default payment method to Google Pay.
Optimize for minimal clicks.
Recommended placements for Google Pay.

Add Google Pay to the product page.
Add Google Pay on the checkout page.
Place Google Pay at the top of the list of payment options.
Place Google Pay above manual entry fields for payment information.

Collect the user's shipping information from Google Pay.
Enable guest checkout with Google Pay.
Use Google Pay to only gather relevant data.

Set the default payment method to Google Pay

Set Google Pay as the default payment method in order to onboard new users or skip account setup screens. We recommend that you set Google Pay as the default payment method when isReadytoPay returns true. This reduces the number of clicks it takes for the customer to get through checkout because the payment and shipping information automatically default to the customer's saved payment method.

Optimize for minimal clicks

If your payment method is set to charge immediately after you invoke Google Pay, do the following:

Ensure that a final and total associated price is shown to the customer before you invoke Google Pay.
Set CheckoutOption to COMPLETE_IMMEDIATE_PURCHASE so that users view a Pay button instead of a Continue button within the Google Pay selector.

This enables a single-click checkout and sets the correct expectations before the user is charged.

[Optimize] Figure 3: Optimize for minimal clicks.

Recommended placements for Google Pay

Display Google Pay in each of the following four locations:

Add Google Pay to the product page.
Add Google Pay on the checkout page.
Place Google Pay at the top of the list of payment options.
Place Google Pay above manual entry fields for payment information.

If you place Google Pay in more than one location, ensure consistency in the IsReadytoPayRequest invocation in all of the locations.

Add Google Pay to the product page

Add Google Pay to your item or product pages, and enable quick checkout for your customers. This reduces the number of checkout steps and increases conversion rates on single-item purchases.

[Add Google Pay to the product page.] Figure 4: Add Google Pay to the product page.

Add Google Pay on the checkout page

If you have a Checkout or Cart button, add Google Pay near the standard checkout option.

When you choose this Google Pay placement, you can offer the customer the following improvements:

A convenient view of all items in the cart
A final and total associated price
The ability to check out immediately

[checkout] Figure 5: Add Google Pay near the standard checkout option.

Place Google Pay at the top of the list of payment options

Ensure Google Pay is prominently displayed so that users know they can checkout in a single click.

[Place Google Pay at the top of the list of payment options.] Figure 6: Place Google Pay at the top of the list of payment options.

Place Google Pay above manual entry fields for payment information

When Google Pay is located prominently above any fields that ask for manual entry, users aren't required to manually enter payment information, or shipping and billing addresses, if we already have that data. This reduces manual entry and increases the conversion rate.

[Place Google Pay above manual entry fields for payment information.] Figure 7: Place Google Pay above manual entry fields for payment information.

Collect the user's shipping information from Google Pay

If you need shipping information, customers can confirm their shipping address within the Google Pay screen along with their payment information. Users then aren't required to enter the address manually. The response from the Google Pay API contains both shipping and payment information.

[Place Google Pay above manual entry fields for payment information.] Figure 8: Set up the shipping address within Google Pay.

Enable guest checkout with Google Pay

Enable an easy checkout process with Google Pay without the need for users to create an account. To do so, request the payment and address information needed for checkout as part of your request to the Google Pay API.

If you have an option for account creation, use the payment and address information provided by the Google Pay API to get the payment and address information needed for account creation. We recommend that account creation is only done after the purchase. Note: User consent is required for account creation.

If you request this information through the Google Pay API, the customer doesnt have to manually fill out all the information required for checkout. This maintains a smooth checkout flow.

Use Google Pay to only gather relevant user data

If you gather data returned by the Google Pay API, it must be used for the purpose of the customer's current transaction only. This includes order confirmation, shipping notification, shipping tracking, order cancellation, refund, and refund notification information.

For example, the Google Pay API returns an email address when you set emailRequired to true in your PaymentDataRequest object.

Maintain this practice to nurture customer trust and loyalty.

Important: If you'd like to use any data returned by the Google Pay API for any purpose other than a transaction, you must obtain separate, express consent from the user, and you must request it from the user outside of the purchase flow.

User experience best practices Stay organized with collections Save and categorize content based on your preferences.