Square Payment Form: Add Digital Wallets

Add the Google Pay Button

Enable Google Pay in your website using the Payment Form.

Web
Payment Form

Prerequsites and assumptions
Permalink Get a link to this section

Important

You cannot use Google Pay in the Square Sandbox environment.

This guide also makes the following assumptions:

  • You have read the What It Does page for this product.

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

Info you will need
Permalink Get a link to this section

  • An active location ID. Use the Locations API to get locations for a seller. To speed up app development, find and copy a valid Developer Account location ID from the Locations setting page of your Square application in the Developer Dashboard. You can also get a production location ID in the Square Dashboard Locations page for a Square Account.

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

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
Permalink Get a link to this section

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 locationId and googlePay configuration fields.

// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({

  locationId: locationId,
  ...

  // Initialize Google Pay button ID
  googlePay: {
    elementId: 'sq-google-pay'
  },

  ...

});

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

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

    methodsSupported: function (methods) {

      ...

      var googlePayBtn = document.getElementById('sq-google-pay');

      if (methods.googlePay === true) {
        googlePayBtn.style.display = 'inline-block';
      }
      ...
    },

Step 4: 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 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.

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.

Note

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

    /*
     * 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
          }
        ],
        shippingOptions: [
          {
            id: "1",
            label: "SHIPPING LABEL",
            amount: "SHIPPING COST"
          }
       ]
      };

      return paymentRequestJson;
    },

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

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:

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

/* 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;
}

Optional: Test the GooglePay button
Permalink Get a link to this section

Although you cannot use the Square Sandbox environment to test GooglePay, you can use the production environment and charge small amounts. For more information, see Testing Mobile Apps.

Optional: Disable the GooglePay button
Permalink Get a link to this section

You may want to disable the GooglePay button temporarily. Maybe you want to enable or disable the button based on a runtime condition. In either case, you probably want to leave all of the button configuration code in place so that you can enable or disable a digital wallet button with a few lines of JavaScript.