Docs Sign In
Docs
Square API
API Reference API Explorer Square SDKs
Web
Setup guide SDK reference
Mobile
Setup guide iOS reference Android reference
Setup guide iOS reference Android reference
Setup guide iOS reference Android reference
Developer forums Slack community Contact support
Developer dashboard Settings
Seller dashboard Sign out
New
Web Payments SDK

Take a Google Pay Payment

Learn how to add Google Pay to the application that you built in Take a Card Payment with Web Payments SDK, using the quickstart project sample. Read Supported Payment Methods by Country to see if digital wallets are supported in your country.

The steps in this topic add code to the quickstart project sample. If you have not created an application using the quickstart, you need to do so before completing the following steps.

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

web-payments : google pay : hero

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

Step 1: Attach Google Pay to the page Permalink Get a link to this section

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 then 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 reason why Google Pay may 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

  1. Navigate to http://localhost:3000/ in your browser. web payments : google pay : button rendered

Checkpoint 1: You should now see the Google Pay button rendered on your page.

Step 2: Get the payment token from the Google Pay payment method Permalink Get a link to this section

  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 is not charged or stored in the Sandbox environment. web payments : payment requests : checkpoint 3

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

Payment request details Permalink Get a link to this section

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 showed 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.