Take Payments

Payment Form Setup Guide: Configure Google Pay

Enable (or disable) Google Pay in your website using the Payment Form.

This document provides step-by-step instructions for enabling and disabling Google Pay with the Square payment form object (SqPaymentForm).

Assumptions

This guide makes the following assumptions:

  • You have read the Payment Form Overview. This is a how-to guide and does not cover general functionality of the payment form.
  • You have followed the required steps from the Payment Form Setup guide. This guide focuses specifically on customizing SqPaymentForm with Google Pay and does not cover general setup for SqPaymentForm.

Requirements and Limitations

Enable Google Pay for Square Payment Form

Enabling Google Pay for the payment form involves:

  • Adding a Google Pay button to your page
  • Customizing the Google Pay button
  • Updating payment form javascript code to support Google Pay

Step 1: Add the Google Pay button to your payment page

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 user interface. Ensure that a button element for Google Pay exists on your website:

<button id="sq-google-pay" class="button-google-pay"></button>

Step 2: Enable the Google Pay parameter in the SqPaymentForm object

The payment form Setup Guide enables Google Pay by default. If you are not using the example javascript (or previously disabled Google Pay), initialize the googlePay parameter with the HTML button ID you set in Step 1:

Add the highlighted code to your payment page javascript.

 1// Create and initialize a payment form object
 2var paymentForm = new SqPaymentForm({
 3
 4  ...
 5
 6  // Initialize Google Pay button ID
 7  googlePay: {
 8    elementId: 'sq-google-pay'
 9  },
10
11  ...
12
13});

Step 3: Update the methodsSupported callback function

Enable the Google Pay button when Google Pay is available by adding the following lines to the methodsSupported callback:

 1    methodsSupported: function (methods) {
 2
 3      ...
 4
 5      var googlePayBtn = document.getElementById('sq-google-pay');
 6
 7      if (methods.googlePay === true) {
 8        googlePayBtn.style.display = 'inline-block';
 9      }
10      ...
11    },

Step 4: Customize the createPaymentRequest callback function

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 will let 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, purchase total, tax and estimated shipping amount.

Note: Replace the example values with customer purchase details.

    /*
     * 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: "mycustomer@example.com",
          country: "USA",
          region: "CA",
          city: "San Francisco",
          addressLines: [
            "1455 Market St #600"
          ],
          postalCode: "94103",
          phone:"14255551212"
        },
        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
          }
        ]
      };

      return paymentRequestJson;
    },

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 2 decimal places. (e.g., "15.00") rather than integers.

Step 6: Customize the Google Pay button

The payment form Setup Guide includes a example CSS template that styles the Google Pay button using an example from Google.

Googlepaybutton

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

/* Indicates how Google Pay button will appear */
.button-google-pay {
  min-width: 200px;
  min-height: 40px;
  padding: 11px 24px;
  margin: 10px;
  background-color: #000;
  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%22103%22%20height%3D%2217%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M.148%202.976h3.766c.532%200%201.024.117%201.477.35.453.233.814.555%201.085.966.27.41.406.863.406%201.358%200%20.495-.124.924-.371%201.288s-.572.64-.973.826v.084c.504.177.912.471%201.225.882.313.41.469.891.469%201.442a2.6%202.6%200%200%201-.427%201.47c-.285.43-.667.763-1.148%201.001A3.5%203.5%200%200%201%204.082%2013H.148V2.976zm3.696%204.2c.448%200%20.81-.14%201.085-.42.275-.28.413-.602.413-.966s-.133-.684-.399-.959c-.266-.275-.614-.413-1.043-.413H1.716v2.758h2.128zm.238%204.368c.476%200%20.856-.15%201.141-.448.285-.299.427-.644.427-1.036%200-.401-.147-.749-.441-1.043-.294-.294-.688-.441-1.183-.441h-2.31v2.968h2.366zm5.379.903c-.453-.518-.679-1.239-.679-2.163V5.86h1.54v4.214c0%20.579.138%201.013.413%201.302.275.29.637.434%201.085.434.364%200%20.686-.096.966-.287.28-.191.495-.446.644-.763a2.37%202.37%200%200%200%20.224-1.022V5.86h1.54V13h-1.456v-.924h-.084c-.196.336-.5.611-.91.826-.41.215-.845.322-1.302.322-.868%200-1.528-.259-1.981-.777zm9.859.161L16.352%205.86h1.722l2.016%204.858h.056l1.96-4.858H23.8l-4.41%2010.164h-1.624l1.554-3.416zm8.266-6.748h1.666l1.442%205.11h.056l1.61-5.11h1.582l1.596%205.11h.056l1.442-5.11h1.638L36.392%2013h-1.624L33.13%207.876h-.042L31.464%2013h-1.596l-2.282-7.14zm12.379-1.337a1%201%200%200%201-.301-.735%201%201%200%200%201%20.301-.735%201%201%200%200%201%20.735-.301%201%201%200%200%201%20.735.301%201%201%200%200%201%20.301.735%201%201%200%200%201-.301.735%201%201%200%200%201-.735.301%201%201%200%200%201-.735-.301zM39.93%205.86h1.54V13h-1.54V5.86zm5.568%207.098a1.967%201.967%200%200%201-.686-.406c-.401-.401-.602-.947-.602-1.638V7.218h-1.246V5.86h1.246V3.844h1.54V5.86h1.736v1.358H45.75v3.36c0%20.383.075.653.224.812.14.187.383.28.728.28.159%200%20.299-.021.42-.063.121-.042.252-.11.392-.203v1.498c-.308.14-.681.21-1.12.21-.317%200-.616-.051-.896-.154zm3.678-9.982h1.54v2.73l-.07%201.092h.07c.205-.336.511-.614.917-.833.406-.22.842-.329%201.309-.329.868%200%201.53.254%201.988.763.457.509.686%201.202.686%202.079V13h-1.54V8.688c0-.541-.142-.947-.427-1.218-.285-.27-.656-.406-1.113-.406-.345%200-.656.098-.931.294a2.042%202.042%200%200%200-.651.777%202.297%202.297%200%200%200-.238%201.029V13h-1.54V2.976zm32.35-.341v4.083h2.518c.6%200%201.096-.202%201.488-.605.403-.402.605-.882.605-1.437%200-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0%205.52v4.736h-1.504V1.198h3.99c1.013%200%201.873.337%202.582%201.012.72.675%201.08%201.497%201.08%202.466%200%20.991-.36%201.819-1.08%202.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668%202.287c0%20.392.166.718.499.98.332.26.722.391%201.168.391.633%200%201.196-.234%201.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61%200-1.12.148-1.528.442-.409.294-.613.657-.613%201.093m1.946-5.815c1.112%200%201.989.297%202.633.89.642.594.964%201.408.964%202.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45%201.372-2.486%201.372-.882%200-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96%200-.828.313-1.486.94-1.976s1.463-.735%202.51-.735c.892%200%201.629.163%202.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132%202.132%200%200%200-1.455-.547c-.84%200-1.504.353-1.995%201.062l-1.324-.834c.73-1.045%201.81-1.568%203.238-1.568m11.853.262l-5.02%2011.53H96.42l1.864-4.034-3.302-7.496h1.635l2.387%205.749h.032l2.322-5.75z%22%20fill%3D%22%23FFF%22%2F%3E%3Cpath%20d%3D%22M75.448%207.134c0-.473-.04-.93-.116-1.366h-6.344v2.588h3.634a3.11%203.11%200%200%201-1.344%202.042v1.68h2.169c1.27-1.17%202.001-2.9%202.001-4.944%22%20fill%3D%22%234285F4%22%2F%3E%3Cpath%20d%3D%22M68.988%2013.7c1.816%200%203.344-.595%204.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754%200-3.244-1.182-3.776-2.774h-2.234v1.731a6.728%206.728%200%200%200%206.01%203.703%22%20fill%3D%22%2334A853%22%2F%3E%3Cpath%20d%3D%22M65.212%208.267a4.034%204.034%200%200%201%200-2.572V3.964h-2.234a6.678%206.678%200%200%200-.717%203.017c0%201.085.26%202.11.717%203.017l2.234-1.731z%22%20fill%3D%22%23FABB05%22%2F%3E%3Cpath%20d%3D%22M68.988%202.921c.992%200%201.88.34%202.58%201.008v.001l1.92-1.918c-1.165-1.084-2.685-1.75-4.5-1.75a6.728%206.728%200%200%200-6.01%203.702l2.234%201.731c.532-1.592%202.022-2.774%203.776-2.774%22%20fill%3D%22%23E94235%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  background-origin: content-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 1px 1px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  outline: 0;
  cursor: pointer;
  display: none;
}

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

Disable Google Pay for SqPaymentForm

To disable Google Pay functionality you need to remove the HTML placeholders, delete the CSS classes, and disable the Google Pay parameters in SqPaymentForm.

Step 1: Remove the Google Pay tags from your payment page

The SqPaymentForm example code includes an HTML tag for Google Pay. Delete the following HTML:

<button id="sq-google-pay" class="button-google-pay"></button>

Step 2: Disable the Google Pay parameter in the SqPaymentForm object

To disable the Google Pay parameter in SqPaymentForm, set the googlePay parameter to false in sqpaymentform.js:

  // Initialize Google Pay placeholder ID
  googlePay: false,

Step 3: Update the methodsSupported callback function

Remove references to the Google Pay visual placeholders (googlePayLabel and googlePayBtn) in the methodsSupported callback:

 1    methodsSupported: function (methods) {
 2
 3      ...
 4      var googlePayBtn = document.getElementById('sq-google-pay');
 5
 6      if (methods.googlePay === true) {
 7        googlePayBtn.style.display = 'inline-block';
 8      }
 9    },

Step 4: Remove the Google Pay CSS class from your stylesheet

The SqPaymentForm example code includes a CSS class related to Google Pay. We recommend deleting the CSS class from sqpaymentform.css:

/* Indicates how Google Pay button will appear */
.button-google-pay {
  ...
}
Prev
< SqPaymentForm Setup Guide
Next
Transactions API Overview >

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow