User experience best practices

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

Set the default payment method to Google Pay

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

Optimize for minimal clicks

If you 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 within the Google Pay selector.

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

Optimize
Figure 1: Optimize for minimal clicks

Recommended placements for Google Pay

Display Google Pay in each of the following four locations:

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 2: 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 of the items within the cart.
  • A final and total associated price.
  • The ability to check out immediately.
checkout
Figure 3: 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 users know they can checkout in a single click.

Place Google Pay at the top of the list of payment options.
Figure 4: 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 5: 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 payment information. Users then aren't required to enter the address manually.

The response from the Google Pay API then contains both shipping and payment information.

Place Google Pay above manual entry fields for payment information.
Figure 6: 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. 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 that user consent is required for account creation.

If you request this information through the Google Pay API, the customer doesn’t have to manually fill out all of 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 can return an email address when you set emailRequired to true in your PaymentDataRequest object.

If you maintain this practice, you can nurture customer trust and loyalty.