Google Pay express checkout

Google Pay is an express payment method that lets shoppers pay with fewer steps.

Before you begin

Google Pay express checkout is supported only with the Advanced flow integration.

Before starting your Google Pay integration:

1. Build a Components integration.
2. Follow the setup steps in the Google Pay documentation.
3. Add Google Pay in your Customer Area.

Code samples

For more details about each step, continue to the step-by-step guide below.

Step 1: Create a DOM element

Create a Document Object Model (DOM) element where you want to implement express checkout.

Step 2: Set the callback intents

When you create an instance of the Component, set the callback intents from Google Pay:

Step 3: Set shipping configurations

Configure the options for shipping address and shipping options:

Step 4: Pass the default shipping options

Configure the default shipping option parameters.

Step 5: Set the transaction information

Set the initial transaction information. For example:

Step 6: Update the payment data

Implement the callback to get updated payment data from Google Pay, like if the shipping address changes. You must come up with the logic to get the new shipping options and calculate the new total. You can do this by implementing your own functions like fetchNewShippingOptions and calculateNewTransactionInfo. For example:

If the amount changes, update the amount and pass it to onSubmit to make the /payments request.

Step 7: Configure the callback to get the shopper's information

Implement the event handler to get the shopper's information from Google Pay. This is triggered after onSubmit:

When the shopper checks out with Google Pay as an express payment method, the configurations you implemented give you updates on the shipping address, payment data, and shopper information.

Step 8: Mount the Component

Check that Google Pay is available and mount the Component:

See also