[null,null,["最后更新时间 (UTC):2024-10-16。"],[[["\u003cp\u003eImplement Google Pay to streamline the checkout process and enhance user experience by minimizing clicks and pre-filling payment and shipping details.\u003c/p\u003e\n"],["\u003cp\u003eOptimize Google Pay integration by setting it as the default payment method when available, enabling card information display on the button, and ensuring a clear total price before invoking Google Pay.\u003c/p\u003e\n"],["\u003cp\u003eStrategically place Google Pay buttons on product pages, checkout pages, and at the top of payment options to maximize visibility and encourage usage.\u003c/p\u003e\n"],["\u003cp\u003eUtilize Google Pay to collect shipping addresses, enable guest checkouts, and gather only transaction-relevant user data to enhance convenience and maintain customer trust.\u003c/p\u003e\n"],["\u003cp\u003eAdhere to Google Pay API guidelines to ensure data privacy and only use collected information for the intended transaction purpose, obtaining explicit consent for any other use cases.\u003c/p\u003e\n"]]],["To optimize the Google Pay UX, set it as the default payment method when `isReadyToPay` is true. Enable card info on the button and minimize clicks by showing the final price before invoking Google Pay and using \"Pay\" instead of \"Continue.\" Place Google Pay on product and checkout pages, at the top of payment options, and above manual entry fields. Collect shipping information via Google Pay and enable guest checkout. Only use data from Google Pay for the current transaction.\n"],null,["# User experience best practices\n\nWhen you integrate with the Google Pay API, various scenarios can occur that are dependent on\nyour website, app buyflow, and user experience (UX). To improve the UX, consider the following\nguidelines:\n\n- [Set the default payment method to Google Pay](#default).\n- [Enable Card Info in the Google Pay button](#enable-card-info).\n- [Optimize for minimal clicks](#optimize).\n- [Recommended placements for Google Pay](#placements).\n - [Add Google Pay to the product page](#product-page).\n - [Add Google Pay on the checkout page](#checkout).\n - [Place Google Pay at the top of the list of payment options](#top1).\n - [Place Google Pay above manual entry fields for payment information](#manual).\n- [Collect the user's shipping information from Google Pay](#shipping).\n- [Enable guest checkout with Google Pay](#guest).\n- [Use Google Pay to only gather relevant data](#gather).\n\nSet the default payment method to Google Pay\n--------------------------------------------\n\nSet Google Pay as the default payment method in order to onboard new users or skip account setup\nscreens. We recommend that you set Google Pay as the default payment method when\n\n[`isReadytoPay`](/pay/api/web/reference/client#isReadyToPay)\n\nreturns `true`. This reduces the number of clicks it takes for the customer to get\nthrough checkout because the payment and shipping information automatically default to the\ncustomer's saved payment method.\n\nEnable Card Info in the Google Pay button\n-----------------------------------------\n\nGoogle Pay can render the consumer's card brand network and the last four digits of their card\non the payment button. This helps consumers understand that there's a card behind the Google Pay\npayment button.\n\n- To enable Card Info, implement the [createButton()](/pay/api/web/reference/client#createButton) API and configure [ButtonOptions.buttonType](/pay/api/web/reference/request-objects#ButtonOptions) to `buy` or `long`.\n- Set the Google Pay payment button to black, shown in figure 1, or white, shown in figure 2, to contrast the checkout page background.\n\n**Figure 1:** The `buttonType` property is set to `long` and `buttonColor` is `black`.\n\n**Figure 2:** The `buttonType` property is set to `long` and `buttonColor` is `white`.\n\nOptimize for minimal clicks\n---------------------------\n\nIf your payment method is set to charge immediately after you invoke Google Pay, do the\nfollowing:\n\n- Ensure that a final and total associated price is shown to the customer before you invoke Google Pay.\n- Set [`CheckoutOption`](/pay/api/web/reference/request-objects#TransactionInfo) to `COMPLETE_IMMEDIATE_PURCHASE` so that users view a **Pay** button instead of a **Continue** button within the Google Pay selector.\n\nThis enables a single-click checkout and sets the correct expectations before the user is charged.\n**Figure 3:** Optimize for minimal clicks.\n\nRecommended placements for Google Pay\n-------------------------------------\n\nDisplay Google Pay in each of the following four locations:\n\n- [Add Google Pay to the product page](#product-page).\n- [Add Google Pay on the checkout page](#checkout).\n- [Place Google Pay at the top of the list of payment options](#top1).\n- [Place Google Pay above manual entry fields for payment information](#manual).\n\nIf you place Google Pay in more than one location, ensure consistency in the\n\n[`IsReadytoPayRequest`](/pay/api/web/reference/request-objects#IsReadyToPayRequest)\n\ninvocation in all of the locations.\n\n### Add Google Pay to the product page\n\nAdd Google Pay to your item or product pages, and enable quick checkout for your customers. This\nreduces the number of checkout steps and increases conversion rates on single-item purchases.\n**Figure 4:** Add Google Pay to the product page.\n\n### Add Google Pay on the checkout page\n\nIf you have a **Checkout** or **Cart** button, add Google Pay near the standard checkout\noption.\n\nWhen you choose this Google Pay placement, you can offer the customer the following improvements:\n\n- A convenient view of all items in the cart\n- A final and total associated price\n- The ability to check out immediately\n\n**Figure 5:** Add Google Pay near the standard checkout option.\n\n### Place Google Pay at the top of the list of payment options\n\nEnsure Google Pay is prominently displayed so that users know they can checkout in a single click.\n**Figure 6:** Place Google Pay at the top of the list of payment options.\n\n### Place Google Pay above manual entry fields for payment information\n\nWhen Google Pay is located prominently above any fields that ask for manual entry, users aren't\nrequired to manually enter payment information, or shipping and billing addresses, if we already\nhave that data. This reduces manual entry and increases the conversion rate.\n**Figure 7:** Place Google Pay above manual entry fields for payment information.\n\nCollect the user's shipping information from Google Pay\n-------------------------------------------------------\n\nIf you need shipping information, customers can confirm their shipping address within the Google\nPay screen along with their payment information. Users then aren't required to enter the address\nmanually. The response from the Google Pay API contains both shipping and payment information.\n**Figure 8:** Set up the shipping address within Google Pay.\n\nEnable guest checkout with Google Pay\n-------------------------------------\n\nEnable an easy checkout process with Google Pay without the need for users to create an account.\nTo do so, request the payment and address information needed for checkout as part of your request\nto the Google Pay API.\n\nIf you have an option for account creation, use the payment and address information provided by\nthe Google Pay API to get the payment and address information needed for account creation. We\nrecommend that account creation is only done after the purchase.\n| **Note:** User consent is required for account creation.\n\nIf you request this information through the Google Pay API, the customer doesn't have to manually\nfill out all the information required for checkout. This maintains a smooth checkout flow.\n\nUse Google Pay to only gather relevant user data\n------------------------------------------------\n\nIf you gather data returned by the Google Pay API, it must be used for the purpose of the\ncustomer's current transaction only. This includes order confirmation, shipping notification,\nshipping tracking, order cancellation, refund, and refund notification information.\n\nFor example, the Google Pay API returns an email address when you set\n\n[`emailRequired`](/pay/api/web/reference/request-objects#PaymentDataRequest)\n\nto `true` in your\n\n[`PaymentDataRequest`](/pay/api/web/reference/request-objects#PaymentDataRequest)\n\nobject.\n\nMaintain this practice to nurture customer trust and loyalty.\n| **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."]]