Take a Google Pay Payment
Learn how to add Google Pay to the application you built in Take a Card Payment with the Web Payments SDK, using the Quickstart project sample. To see whether digital wallets are supported in your country, see Supported Payment Methods by Country.
The steps in this topic add code to the Quickstart project sample. If you haven't created an application using the Quickstart, you need to do so before completing the following steps.
The following shows the Google Pay pay sheet rendered by the Web Payments SDK:
You can find a complete example of the Google Pay code on GitHub.
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 in all regions except Japan. Google Pay incorporates the region's local currency.
You've read and will adhere to Google Pay API Terms of Service, Google Pay API Acceptable Use Policy, and Google's brand guidelines.
The Google Pay payment method needs information about the buyer and the payment amount before it can open the Google Pay sheet. Your application creates a PaymentRequest object to provide that information and then gets a new GooglePay object initialized with it.
The following code creates the payment request and attaches the GooglePay
method to the page:
Add an HTML element to the prerequisite walkthrough form with an ID of
google-pay-button
. The HTML for the body of index.html should look like the following:Add the following two functions to your script tag:
In the
DOMContentLoaded eventListener
, add the following code after you initialize theGooglePay
method:
Test the application
Navigate to http://localhost:3000/ in your browser.
Success
You should now see the Google Pay button rendered on your page.
This step uses the standard configuration options for the Google Pay button. More options to customize the Google Pay button with the GooglePay.attach() method and the googlePayButtonOptions object are available at the Web Payments SDK technical reference.
Add the following code after
// Checkpoint 2
in theDOMContentLoaded eventListener
function:
Test the application
Navigate to http://localhost:3000/ in your browser.
Choose the Google Pay button.
Use your own personal card. This card isn't charged or stored in the Sandbox environment.
Success
You should see the Google Pay form and be able to complete a payment.
Before your application can request a digital wallet payment, it must provide payment request details that the digital wallet page shows to the buyer. The previous examples show a payment request with a specified country, currency, and payment amount. In production use, your application might need to declare payment requests that include more detail and with added event listeners. To learn more about advanced payment requests, see Payment Requests.
To add security to a payment method, you can add the 3-D Secure security protocol layer to the application. 3-D Secure integrates Strong Customer Authentication (SCA) to verify the identity of the payment card holder by using the verifyBuyer
function. For more information, see 3-D Secure Overview.
Important
SCA should be called for all customer-initiated transactions, including digital wallet payments. If the seller doesn't have SCA called for digital wallet payments, the transactions may be declined due to lack of authentication.
If you need more assistance, contact Developer Support or ask for help in the Developer Forums.