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 the source_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.