Payment-method icon

Google Pay express checkout

Configure Google Pay for express checkout.

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

Try it out!

Requirements

Requirement Description
Integration type Google Pay express checkout is supported only with the Advanced flow integration. Make sure that you have built an Advanced flow Components integration.
Setup steps Before you begin: .

Code samples

DOM element
Expand view
Copy link to code block
Copy code
Copy code
<!-- Step 1: Create a DOM element -->
<div id="googlepay-container"></div>
Component implementation example
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
// Step 2: Set the callback intents.
callbackIntents: ['SHIPPING_ADDRESS', 'SHIPPING_OPTION'],
// Step 3: Set shipping configurations.
shippingAddressRequired: true,
shippingAddressParameters: {
allowedCountryCodes: [],
phoneNumberRequired: true
},
// Shipping options configurations.
shippingOptionRequired: true,
// Step 4: Pass the default shipping options.
shippingOptions: {
defaultSelectedOptionId: 'shipping-001',
shippingOptions: [
{
id: 'shipping-001',
label: '$0.00: Free shipping',
description: 'Free shipping: delivered in 10 business days.'
},
{
id: 'shipping-002',
label: '$1.99: Standard shipping',
description: 'Standard shipping: delivered in 3 business days.'
},
]
},
// Step 5: Set the transaction information.
//Required for v6.0.0 or later.
isExpress: true,
// Line items.
transactionInfo:{
displayItems: [
{
label: 'Subtotal',
type: 'SUBTOTAL',
price: '99.00'
},
{
label: 'Tax',
type: 'TAX',
price: '1.00'
}
],
countryCode: 'US',
currencyCode: 'USD',
totalPriceStatus: 'FINAL',
totalPrice: '100.00',
totalPriceLabel: 'Total'
},
// Step 6: Update the payment data.
paymentDataCallbacks: {
onPaymentDataChanged(intermediatePaymentData) {
return new Promise(async resolve => {
const { callbackTrigger, shippingAddress, shippingOptionData } = intermediatePaymentData;
const paymentDataRequestUpdate = {};
// Validate the country/region and address selection.
if (shippingAddress.countryCode !== 'US' && shippingAddress.countryCode !== 'BR') {
paymentDataRequestUpdate.error = {
reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',
message: 'Cannot ship to the selected address',
intent: 'SHIPPING_ADDRESS'
};
}
// If it initializes or changes the shipping address, calculate the shipping options and transaction info.
if (callbackTrigger === 'INITIALIZE' || callbackTrigger === 'SHIPPING_ADDRESS') {
paymentDataRequestUpdate.newShippingOptionParameters = await fetchNewShippingOptions(shippingAddress.countryCode);
paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(/* ... */);
}
// If SHIPPING_OPTION changes, calculate the new shipping amount.
if (callbackTrigger === 'SHIPPING_OPTION') {
paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(/* ... */);
}
resolve(paymentDataRequestUpdate);
});
}
},
// Step 7: Configure the callback to get the shopper's information.
onAuthorized: paymentData => {
console.log('Shopper details', paymentData);
}
});
// Step 8: Mount the Component.
googlepay
.isAvailable()
.then(() => {
googlePayComponent.mount("#googlepay-container");
})
.catch(e => {
// Google Pay isn't available.
});

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.

Create a DOM element
Expand view
Copy link to code block
Copy code
Copy code
<div id="googlepay-container"></div>

Step 2: Set the callback intents

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

Callback intents
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
callbackIntents: ['SHIPPING_ADDRESS', 'SHIPPING_OPTION'],
// ...Other parameters.
});

Step 3: Set shipping configurations

Configure the options for shipping address and shipping options:

Shipping configuration
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
// ...Other parameters.
// Shipping address configurations.
shippingAddressRequired: true,
shippingAddressParameters: {
allowedCountryCodes: [],
phoneNumberRequired: true
},
// Shipping options configurations.
shippingOptionRequired: true
});

Step 4: Pass the default shipping options

Configure the default shipping option parameters.

Default shipping options
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
// ...Other parameters
shippingOptionParameters: {
defaultSelectedOptionId: 'shipping-001',
shippingOptions: [
{
id: 'shipping-001',
label: '$0.00: Free shipping',
description: 'Free shipping: delivered in 10 business days.'
},
{
id: 'shipping-002',
label: '$1.99: Standard shipping',
description: 'Standard shipping: delivered in 3 business days.'
},
]
}
});

Step 5: Set the transaction information

Set up additional component configuration, and set the initial transaction information. For example:

For v6.0.0 or later, you must include isExpress: true.

Get transaction information
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
//... Other parameters.
// Required for v6.0.0 or later.
isExpress: true,
transactionInfo:{
displayItems: [
{
label: 'Subtotal',
type: 'SUBTOTAL',
price: '99.00'
},
{
label: 'Tax',
type: 'TAX',
price: '1.00'
}
],
countryCode: 'US',
currencyCode: 'USD',
totalPriceStatus: 'FINAL',
totalPrice: '100.00',
totalPriceLabel: 'Total'
}
});

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:

Get updated payment data from Google Pay
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
//... Other parameters.
paymentDataCallbacks: {
onPaymentDataChanged(intermediatePaymentData) {
return new Promise(async resolve => {
const { callbackTrigger, shippingAddress, shippingOptionData } = intermediatePaymentData;
const paymentDataRequestUpdate = {};
// Validate the country/region and address selection.
if (shippingAddress.countryCode !== 'US' && shippingAddress.countryCode !== 'BR') {
paymentDataRequestUpdate.error = {
reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',
message: 'Cannot ship to the selected address',
intent: 'SHIPPING_ADDRESS'
};
}
// If it initializes or changes the shipping address, calculate the shipping options and transaction info.
if (callbackTrigger === 'INITIALIZE' || callbackTrigger === 'SHIPPING_ADDRESS') {
paymentDataRequestUpdate.newShippingOptionParameters = await fetchNewShippingOptions(shippingAddress.countryCode);
paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(/* ... */); // You must implement this function and its logic.
}
// If SHIPPING_OPTION changes, calculate the new shipping amount.
if (callbackTrigger === 'SHIPPING_OPTION') {
paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(/* ... */); // You must implement this function and its logic.
}
resolve(paymentDataRequestUpdate);
});
}
}
});

When the payment amount changes, Adyen doesn't receive the updated amount from Google Pay. You must validate that the updated amount is correct before you send it in the /payments request.

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:

Get the shopper information from Google Pay payment data
Expand view
Copy link to code block
Copy code
Copy code
const googlepay = checkout.create('googlepay', {
// ...Other parameters
onAuthorized: paymentData => {
console.log('Shopper details', paymentData);
}
});

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:

Check if available and mount the Component
Expand view
Copy link to code block
Copy code
Copy code
googlePay
.isAvailable()
.then(() => {
googlePayComponent.mount("#googlepay-container");
})
.catch(e => {
// Google Pay isn't available.
});

See also