Add the Google Pay Button
This guide provides step-by-step instructions for enabling and disabling Google Pay with the Square payment form object SqPaymentForm.
On this page
Enable the Google Pay digital wallet button
After completing the steps in this guide, your payment form includes a button like the following example.
Prerequisites and assumptions
Google Pay is supported on Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera, and UCWeb UC browsers.
Google Pay requires HTTPS.
Square supports Google Pay only for CA$ transactions in Canada, GBP transactions in the United Kingdom and USD transactions in the United States.
You have read and will adhere to Google Pay API Terms of Service, Google Pay API Acceptable Use Policy, and Google's brand guidelines.
This guide also makes the following assumptions:
You have followed the required steps in Walkthrough: Integrate Square Payments in a Website.
You are not integrating Google Pay with the single-element payment form (beta).
You test your Google Pay integration in the Square Sandbox.
Step 2: Add the Google Pay button to your payment page
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.
<button id="sq-google-pay" class="button-google-pay"></button>
Step 3: Enable the Google Pay parameter in the SqPaymentForm object
Important
To test an application in the Square Sandbox, go to the Developer Dashboard and set the dashboard to Sandbox Settings mode before completing the following instructions in this step.
Initialize the
googlePayconfiguration field with the HTML button ID you set in step 2.Copy your application ID from the Credentials page.
Copy a location ID from the Locations page.
// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({
applicationId: "REPLACE_WITH_APPLICATION_ID",
locationId: "REPLACE_WITH_LOCATION_ID",
...
// Initialize Google Pay button ID
googlePay: {
elementId: 'sq-google-pay'
},
...
});
methodsSupported: function (methods, unsupportedReason) {
...
console.log(methods);
var googlePayBtn = document.getElementById('sq-google-pay');
// Only show the button if Google Pay on the Web is enabled
if (methods.googlePay === true) {
googlePayBtn.style.display = 'inline-block';
} else {
console.log(unsupportedReason);
}
...
},
Step 5: 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 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.
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 a buyer chooses the Google Pay button (when the 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 6: Customize the Google Pay button
The payment form setup guide includes a sample 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 template supports CSS customization for the Google Pay button. You are responsible for ensuring that your changes adhere to the Google
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;
}
Test Google Pay and put into production
To test your Google Pay integration, you must register a valid credit card in Google Pay.
Important
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:
Open your payment page and verify that the Google Pay button renders as shown:
Choose the Google Pay button and complete the payment sheet that opens.
Verify that you are receiving a Google Pay nonce in the
cardNonceResponseReceivedcallback.
The nonce generated for Google Pay can be used to take a payment with the Payments API in the Sandbox environment.
Production configuration
When your application is ready for production, do the following:
Replace the Sandbox application ID and location ID in your payment page JavaScript with a production application ID and location ID.
Change your payment page script tag that references the payment form library to:
https://js.squareup.com/v2/paymentformDid you know?
To configure your application for the production environment, go the Developer Dashboard and set the dashboard to Production mode.