Google Pay
Usage
-
Initialize the Square Payments object
Initialize the Square Payments object with your application ID and the ID of the seller location where the payment is taken.
const payments = Square.payments(APPLICATION_ID, LOCATION_ID);
-
Create a PaymentRequest with the total amount
Create a new PaymentRequest using the desired options. At the minimum, you need to provide the total amount, the countryCode, and the currencyCode. Note: The amount field is formatted for display, including decimal places. When creating a payment with the Payments API, the amount must be formatted as the payment amount in the smallest unit of currency. For example, $5.79 would be 579 cents.
const request = payments.paymentRequest({ countryCode: 'US', currencyCode: 'USD', total: { amount: '5.79', label: 'Total', }, });
-
Create a GooglePay instance
Create a new
GooglePay
instance using your PaymentRequest.const googlePay = await payments.googlePay(request);
This creates a new GooglePay instance with all of the behaviors and properties needed to take a Google Pay payment.
-
Attach the GooglePay instance to the page
Attach the
GooglePay
instance to an empty DOM element on your page. The Google Pay button renders into the empty element. You can also specify a number of options that determine the look of the button itself such as the button color, and the button type.googlePay.attach('#googlePay', { buttonColor: 'default', buttonType: 'long' });
-
Trigger the Google Pay payment sheet and receive a payment token
Trigger the Google Pay payment sheet and receive a payment token from the GooglePay instance when the buyer completes their interaction by calling the tokenize method. This method returns a promise which resolves with a TokenResult.
const tokenResult = await googlePay.tokenize(); if (tokenResult.status === 'OK') { const token = tokenResult.token; } else { console.error(tokenResult.errors); }
If the Google Pay information is valid, the tokenResult will include an
'OK'
, status as well as a one-time-use token which can be used as thesource_id
when making a call to the Payments API CreatePayment endpoint to charge a customer. If the Google Pay information is not valid, it will return an error that you can present to the customer.
<!-- Provide a target element for the Google Pay button -->
<form>
<div id="google-pay-button"></div>
</form>
<!-- Configure the Web Payments SDK and Google Pay -->
<script type="text/javascript">
async function main() {
const payments = Square.payments(APPLICATION_ID, LOCATION_ID);
const paymentRequest = payments.paymentRequest({
countryCode: 'US',
currencyCode: 'USD',
total: {
amount: '1.00',
label: 'Total',
},
});
const googlePay = await payments.googlePay(paymentRequest);
await googlePay.attach('#google-pay-button');
async function eventHandler(event) {
event.preventDefault();
try {
const result = await googlePay.tokenize();
if (result.status === 'OK') {
console.log(`Payment token is ${result.token}`);
}
} catch (e) {
console.error(e);
}
};
const googlePayButtonTarget = document.getElementById('google-pay-button');
googlePayButtonTarget.addEventListener('click', eventHandler);
}
main();
</script>
#
Payments
Returned by Square.payments(appId, locationId)
.
Use this object to instantiate Payment methods. Learn more on the Payments page.
Methods
const payments = Square.payments(appId, locationId);
#
GooglePay
The Google Pay Payment Method.
Google Pay supports taking payments via credit cards. Utilizing the PaymentRequest object, you can handle Shipping Option selection, as well as collect Shipping and Billing addresses.
Methods
const paymentRequest = payments.paymentRequest({
countryCode: 'US',
currencyCode: 'USD',
total: {
amount: '5.79',
label: 'Total'
},
});
const googlePay = await payments.googlePay(paymentRequest);
await googlePay.attach('#googlePay');
const googlePayButtonTarget = document.getElementById('googlePay');
googlePayButtonTarget.onclick = async () => {
const tokenResult = await googlePay.tokenize();
// Pass `tokenResult.token` to your server, and then call the /v2/payments API
// to complete the payment
}