Pay with Google Pay integration

DocsCurrentLast updated: December 13th 2023, @ 5:50:11 pm


We’ve made changes to this page and its layout to improve the developer experience

Let us know what you think of the updated documentation by selecting the feedback tab below.

Supported countries and currencies

Google Pay supports payments in 36 countries and 22 currencies:

  • Countries: Australia, Austria, Belgium, Bulgaria, Canada, China, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hong Kong, Hungary, Ireland, Italy, Japan, Latvia, Liechtenstein, Lithuania, Luxembourg, Malta, Netherlands, Norway, Poland, Portugal, Romania, Singapore, Slovakia, Slovenia, Spain, Sweden, United States, United Kingdom
  • Currencies: AUD, BRL, CAD, CHF, CZK, DKK, EUR, GBP, HKD, HUF, ILS, JPY, MXN, NOK, NZD, PHP, PLN, SEK, SGD, THB, TWD, USD

Note: TPAN is not supported by local processors (NTTD) and acquirers in Japan for Visa, Mastercard, JCB, or Diners Club cards.

Note: If you want to integrate additional methods of accepting payment beyond Google Pay, visit our Advanced Checkout guide for additional integration choices.

Get up and running in GitHub Codespaces

GitHub Codespaces are cloud-based development environments where you can code and test your PayPal integrations. Learn more

Note: See the Google Pay PaymentDataRequest Object API reference for the complete list of properties available for the PaymentDataRequest object.

Register click handler

Register a click event handler for the Google Pay purchase button. Call loadPaymentData() in the event handler when the user interacts with the purchase button and pass the PaymentDataRequest object.

1/**
2 * Show Google Pay payment sheet when Google Pay payment button is clicked
3 */
4 async function onGooglePaymentButtonClicked() {
5 const paymentDataRequest = await getGooglePaymentDataRequest();
6 const paymentsClient = getGooglePaymentsClient();
7 paymentsClient.loadPaymentData(paymentDataRequest);
8 }

Add the click handler onGooglePaymentButtonClicked to the Button defined in Set up your Google Pay button.

For more details about paymentDataRequest refer to step 9 in Google's developer documentation.

onpaymentauthorized callback

Google calls the onPaymentAuthorized() callback with a PaymentData object when a customer consents to your site collecting their payment information and optional contact details.

Register the onPaymentAuthorized() callback as part of the PaymentClient initialization as shown in Google Pay's Client Reference page.

Create an order by using the PayPal Orders V2 API. Use paypal.Googlepay().confirmOrder() to send the orderID, the Google Pay Payment Data, and optional contact details, and confirm the order.

Confirm the order using the paypal.Googlepay().confirmOrder() method in the API SDK Reference.

If the order confirmation status is APPROVED, capture the order using the Capture payment for order endpoint of the PayPal Orders V2 API.

For more details, see step 11 of Google's developer documentation.

Note: You can see an example of an Authorize Payments call in the Put it all together section of Google's developer documentation.

1async function processPayment(paymentData) {
2 return new Promise(function async (resolve, reject) {
3 try {
4 // Create the order on your server
5 const {id} = await fetch(`/orders`, {
6 method: "POST",
7 body:
8 // You can use the "body" parameter to pass optional, additional order information, such as:
9 // amount, and amount breakdown elements like tax, shipping, and handling
10 // item data, such as sku, name, unit_amount, and quantity
11 // shipping information, like name, address, and address type
12 });
13 const confirmOrderResponse = await paypal.Googlepay().confirmOrder({
14 orderId: id,
15 paymentMethodData: paymentData.paymentMethodData
16 });
17 /** Capture the Order on your Server */
18 if(confirmOrderResponse.status === "APPROVED"){
19 const response = await fetch(`/capture/${id}`, {
20 method: 'POST',
21 }).then(res => res.json());
22 if(response.capture.status === "COMPLETED")
23 resolve({transactionState: 'SUCCESS'});
24 else
25 resolve({
26 transactionState: 'ERROR',
27 error: {
28 intent: 'PAYMENT_AUTHORIZATION',
29 message: 'TRANSACTION FAILED',
30 }
31 })
32 } else {
33 resolve({
34 transactionState: 'ERROR',
35 error: {
36 intent: 'PAYMENT_AUTHORIZATION',
37 message: 'TRANSACTION FAILED',
38 }
39 })
40 }
41 } catch(err) {
42 resolve({
43 transactionState: 'ERROR',
44 error: {
45 intent: 'PAYMENT_AUTHORIZATION',
46 message: err.message,
47 }
48 })
49 }
50 });
51 }

Customize payment experience

Use the Google Pay JavaScript SDK to customize the payer experience. The following table shows the 2 most popular Google Pay customizations:

CustomizationDetails
PaymentDataChangeThis method is used to handle payment data changes in the payment sheet such as shipping address and shipping options.
PaymentDataRequestProvides optional properties to collect details, such as shipping address and email.