View step-by-step instructions for enabling and disabling Google Pay with the Square payment form object.
Square Payment Form

Add the Google Pay Button Deprecated
This component is deprecated. See below for guidance about what to use instead.


The Square payment form is deprecated and replaced by the Web Payments SDK.

You should use the Web Payments SDK to take payments on a web client. Web Payments SDK uses modern web styling as shown in the following image:

A graphic showing the five visual elements of the Card payment method, which are represented as selectors that you specify in a card option styling object.

Prerequisites and assumptions Permalink Get a link to this section

This guide also makes the following assumptions:

Step 1: Configure a payment form for the Sandbox Permalink Get a link to this section

In index.html, set the SqPaymentForm reference URL to the following:

Step 2: Add the Google Pay button to your payment page Permalink Get a link to this section

In index.html, add a button element for Google Pay.

The SqPaymentForm object is initialized with the Google Pay button ID so SqPaymentForm can detect a button click event. When a user clicks the button, SqPaymentForm renders the Google Pay digital wallet payment sheet.

Step 3: Enable the Google Pay parameter in the SqPaymentForm object Permalink Get a link to this section


To test an application in the Square Sandbox, go to the Developer Dashboard and set the dashboard to Sandbox mode before completing the following instructions in this step.

  1. Initialize the googlePay configuration field with the HTML button ID you set in step 2.

  2. Copy your application ID from the Credentials page.

  3. Copy a location ID from the Locations page.

Step 4: Update the methodsSupported callback function Permalink Get a link to this section

Enable the Google Pay button when Google Pay is available by adding Google Pay logic to the methodsSupported callback.

Step 5: Customize the createPaymentRequest callback function Permalink Get a link to this section

To process payments, customize the createPaymentRequest callback function by editing the PaymentRequest object. The block should be populated with the customer's purchase totals, default shipping contact information, and Boolean values that determine whether the digital wallet lets the customer provide a shipping address.

In the following example, the createPaymentRequest callback function is updated to return a PaymentRequest object that asks the digital wallet to allow shipping address selection, a default shipping contact, the purchase total, the tax, and the estimated shipping amount.

Be sure to replace the example values with customer purchase details.

Digital wallet services expect payment requests in a specific format. The result is that the object created in createPaymentRequest is functionally different from Square's internal data types. For example, monetary amounts are provided as a string representation of a float with two decimal places (such as 15.00) instead of integer types in a Money object.


If you do not provide shipping options in the initial payment request after registering a shippingOptionChanged callback, the payment form throws an error when a buyer chooses the Google Pay button (when the Google Pay payment request is created).

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
     * callback function: createPaymentRequest
     * Triggered when: a digital wallet payment button is clicked.
    createPaymentRequest: function () {
      var paymentRequestJson = {
        requestShippingAddress: true,
        requestBillingInfo: true,
        shippingContact: {
          familyName: "CUSTOMER LAST NAME",
          givenName: "CUSTOMER FIRST NAME",
          email: "",
          country: "USA",
          region: "CA",
          city: "San Francisco",
          addressLines: [
            "1455 Market St #600"
          postalCode: "94103",
        currencyCode: "USD",
        countryCode: "US",
        total: {
          label: "MERCHANT NAME",
          amount: "85.00",
          pending: false
        lineItems: [
            label: "Subtotal",
            amount: "60.00",
            pending: false
            label: "Shipping",
            amount: "19.50",
            pending: true
            label: "Tax",
            amount: "5.50",
            pending: false
        shippingOptions: [
            id: "1",
            label: "SHIPPING LABEL",
            amount: "SHIPPING COST"

      return paymentRequestJson;

Step 6: Customize the Google Pay button Permalink Get a link to this section

The payment form setup guide includes a sample CSS template that styles the Google Pay button using an example from Google.

A graphic showing the Google Pay button.

If you are not using the SqPaymentForm templates, or previously disabled Google Pay functionality, add the following CSS to your stylesheet:

The SqPaymentForm template supports CSS customization for the Google Pay button. You are responsible for ensuring that your changes adhere to the Google brand guidelines.

Test Google Pay and put into production Permalink Get a link to this section

To test your Google Pay integration, you must register a valid credit card in Google Pay.


Google Pay does not allow you to add Sandbox test card values. Instead, use the credit card you registered with Google. As long as you are testing in the Sandbox, your credit card is not charged for any test payments.

Testing your Google Pay integration involves the following steps:

  1. Open your payment page and verify that the Google Pay button renders as shown: A graphic showing the Google Pay button.

  2. Choose the Google Pay button and complete the payment sheet that opens.

  3. Verify that you are receiving a Google Pay payment token in the cardNonceResponseReceived callback.

The payment token generated for Google Pay can be used to take a payment with the Payments API in the Sandbox environment.

Production configuration Permalink Get a link to this section

When your application is ready for production, do the following:

  1. Replace the Sandbox application ID and location ID in your payment page JavaScript with a production application ID and location ID.

  2. Change your payment page script tag that references the payment form library to the following:

    Did you know?

    To configure your application for the production environment, go the Developer Dashboard and set the dashboard to Production mode.

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.