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).
Process overview
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.
Prerequsites and assumptions
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 have read and will adhere to Google Pay API Terms of Service, Google Pay API Acceptable Use Policy and Google's brand guidelines.
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
SqPaymentFormwith Google Pay and does not cover general setup forSqPaymentForm.
Info you will need
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
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
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 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'
},
...
});
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
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.
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
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:
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
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.