Add the Google Pay Button
Enable 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
).
On This Page
- Enable the GooglePay digital wallet button
- Assumptions
- Requirements and Limitations
- Step 1: Add the Google Pay button to your payment page
- Step 2: Enable the Google Pay parameter in the SqPaymentForm object
- Step 3: Update the methodsSupported callback function
- Step 4: Customize the createPaymentRequest callback function
- Step 5: Customize the Google Pay button
- Optional: Test the GooglePay button
- Optional: Disable the GooglePay button
- Optional: Remove the GooglePay button
Enable the GooglePay digital wallet button
When you have completed the steps in this guide, your payment form will include a button like this button.

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 forSqPaymentForm
.
Requirements and Limitations
- Google Pay is supported on Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, and UCWeb UC Browser.
- Google Pay requires HTTPS.
- Square supports Google Pay only for USD transactions.
- You cannot use Google Pay in the Square Sandbox environment.
- You have read and will adhere to Google Pay API Terms of Service, Google Pay API Acceptable Use Policy and Google's brand guidelines.
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 5: 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.

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.
Optional: Test the GooglePay button
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
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.
Optional: Remove the GooglePay button
See Remove wallet payments configurations to learn about removing the GooglePay button and supporting configuration.