Add the Google Pay Button
Deprecated
This component is deprecated. See below for guidance about what to use instead.
Note
The Square payment form is deprecated and replaced by the Web Payments SDK.
You should use the Web Payments SDK to take payments on a web client. Web Payments SDK uses modern web styling as shown in the following image:
This guide provides step-by-step instructions for enabling and disabling Google Pay with the Square payment form SqPaymentForm object.
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 CAD 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.
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 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.
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).
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.
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 payment token in the
cardNonceResponseReceivedcallback.
The payment token 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 the following:
Did you know?
To configure your application for the production environment, go the Developer Dashboard and set the dashboard to Production mode.
If you need more assistance, contact Developer Support or ask for help in the Developer Forums.