GooglePay Container

The GooglePay container renders a checkout button that enables shoppers to pay using Google Pay .

Version: 4.0.0

Configuration

The GooglePay container provides the following configuration options:

Option	Type	Req?	Description
onButtonClick	function	No	Called when the shopper clicks the Google Pay button. Receives a showPaymentSheet function, which must be called synchronously to begin the Google Pay checkout and show the payment sheet. If not provided, clicking the button automatically triggers the payment sheet.
onSuccess	function	No	Called when the payment completes successfully. Receives { cartId: string }. If the function returns a promise, it is awaited before marking the payment as successful. If the promise rejects, the payment is marked as failed and the error is passed to onError (if provided).
onError	function	No	Called when the payment flow fails or is aborted. Receives { name: string, message: string }, containing localized, user-facing error details. These values can be translated using PaymentServices.GooglePay.errors language definitions.
hidden	boolean	No	Whether the button is hidden. Set to true to hide the Google Pay button. Default: false.
disabled	boolean	No	Whether the button is disabled. Set to true to disable the Google Pay button. Default: false.

Slots

This container does not expose any customizable slots.

Usage

Checkout page example

The following example demonstrates how to use the GooglePay container on the checkout page.

import GooglePay from '@dropins/storefront-payment-services/containers/GooglePay.js';
import { render as PaymentServices } from '@dropins/storefront-payment-services/render.js';
import * as orderApi from '@dropins/storefront-order/api.js';

const $content = document.createElement('div');
PaymentServices.render(GooglePay, {
  onSuccess: ({ cartId }) => orderApi.placeOrder(cartId),
  onError: (error) => { console.error(error) },
})($content);