Take a Google Pay Payment

Applies to: Web Payments SDK

Learn how to take Google Pay payments in a web client with the Web Payments SDK.

You can add Google Pay to the application you built in Web Payments SDK Quickstart using the quickstart project sample. Digital wallet payments with Google Pay are available in all regions in which Square operates.

The following steps add code to the quickstart project sample. If you haven't created an application using the quickstart, you need to do so before completing these steps.

The following shows the Google Pay pay sheet rendered by the Web Payments SDK:

You can find a complete example of the Google Pay code on GitHub.

• Google Pay is supported on Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, and UCWeb UC browsers.
• Google Pay requires HTTPS.
• WebView Support: Google Pay works in Android WebView and iOS WKWebView with additional configuration (see WebView Support section below).
• You must read and adhere to Google Pay API Terms of Service, Google Pay API Acceptable Use Policy, and Google's brand guidelines.

The Google Pay payment method needs information about the buyer and the payment amount before it can open the Google Pay sheet. Your application creates a PaymentRequest object to provide that information and then gets a new GooglePay object initialized with it.

The following code creates the payment request and attaches the GooglePay method to the page:

1. Add an HTML element to the prerequisite walkthrough form with an ID of google-pay-button. The HTML for the body of index.html should look like the following:

   <form id="payment-form">
      <!-- Add the google-pay-button div below -->
      <div id="google-pay-button"></div>
      <div id="card-container"></div>
      <button id="card-button" type="button">Pay $1.00</button>
   </form>
   <div id="payment-status-container"></div>

2. Add the following two functions to your script tag:

    function buildPaymentRequest(payments) {
      return payments.paymentRequest({
        countryCode: 'US',
        currencyCode: 'USD',
        total: {
          amount: '1.00',
          label: 'Total',
        },
      });
    }
   
    async function initializeGooglePay(payments) {
      const paymentRequest = buildPaymentRequest(payments)
   
      const googlePay = await payments.googlePay(paymentRequest);
      await googlePay.attach('#google-pay-button');
   
      return googlePay;
    }

3. In the DOMContentLoaded eventListener, add the following code after you initialize the GooglePay method:

     let googlePay;
     try {
       googlePay = await initializeGooglePay(payments);
     } catch (e) {
       console.error('Initializing Google Pay failed', e);
       // There are a number of reasons why Google Pay might not be supported.
       // (e.g. Browser Support, Device Support, Account). Therefore you
       // should handle initialization failures, while still loading other
       // applicable payment methods.
     }

Test the application

Navigate to http://localhost:3000/ in your browser.

This step uses the standard configuration options for the Google Pay button. More options to customize the Google Pay button with the GooglePay.attach() method and the googlePayButtonOptions object are available in the Web Payments SDK technical reference.

1. Add the following code after // Checkpoint 2 in the DOMContentLoaded eventListener function:

    if (googlePay !== undefined) {
      const googlePayButton = document.getElementById('google-pay-button');
      googlePayButton.addEventListener('click', async function (event) {
        await handlePaymentMethodSubmission(event, googlePay);
      });
    }

Test the application

1. Navigate to http://localhost:3000/ in your browser.

2. Choose the Google Pay button.

3. Use your own personal card. This card isn't charged or stored in the Sandbox environment.

   

   Success

   You should see the Google Pay form and be able to complete a payment.

Before your application can request a digital wallet payment, it must provide payment request details that the digital wallet page shows to the buyer. The previous examples show a payment request with a specified country, currency, and payment amount. In production use, your application might need to declare payment requests that include more detail and with added event listeners. To learn more about advanced payment requests, see Payment Requests.

Square provides dedicated mobile SDKs for native application development: the In-App Payments SDK for online payments with customizable payment screens, and the Mobile Payments SDK for in-person payments. Alternatively, if you want to reuse your web payment implementation in mobile apps, you can use the Square Web Payments SDK within a mobile WebView with additional configuration.

For web applications embedded in WebViews or that use popups, configure your server's Cross-Origin-Opener-Policy header to prevent payment errors:

Cross-Origin-Opener-Policy: same-origin-allow-popups

Important: Using Cross-Origin-Opener-Policy: same-origin can cause Google Pay to fail with a 400 error (OR_BIBED_15) on iOS devices, even when the Google Pay button renders correctly. For more details on troubleshooting this error, see Google's troubleshooting guide.