Payment Services Data & Events

The Payment Services drop-in uses the event bus to emit and listen for events, enabling communication between drop-ins and external integrations.

Version: 4.1.0

Events reference

Event	Direction	Description
authenticated	Listens	Fired by the User Auth drop-in when the user’s authentication state changes. Used to determine whether the shopper is a guest customer.
cart/data	Listens	Fired by the Cart drop-in when cart data is available or changes. Used by various payment method containers to retrieve the cart ID and other cart data.
checkout/initialized	Listens	Fired by the Checkout drop-in when the checkout page is first loaded. Used as a fallback by the GooglePay container when checkout/updated has not yet been received.
checkout/updated	Listens	Fired by the Checkout drop-in when the checkout state is updated. Read by the GooglePay container at button click time to determine the selected shipping method and billing address.
payment-services/initialized/checkout	Emits	Emitted when the drop-in finishes initializing for the CHECKOUT location.
payment-services/initialized/product-detail	Emits	Emitted when the drop-in finishes initializing for the PRODUCT_DETAIL location.

Event details

The following sections provide detailed information about each event, including its direction, event payload, and usage examples.

authenticated (listens)

Fired by the User Auth drop-in when the user’s authentication state changes. Used to determine whether the shopper is a guest customer.

Event payload

boolean

true when the shopper is authenticated, false when signed out.

Example

import { events } from '@dropins/tools/event-bus.js';

events.on('authenticated', (isAuthenticated) => {
  console.log('authenticated event received:', isAuthenticated);
});

---

cart/data (listens)

Fired by the Cart drop-in when cart data is available or changes. Used by various payment method containers to retrieve the cart ID and other cart data at checkout. The event must have fired at least once with a non-null payload before the shopper initiates payment (for example, clicks a payment button).

Event payload

CartModel | null

See CartModel for the full type definition.

Example

import { events } from '@dropins/tools/event-bus.js';

events.on('cart/data', (payload) => {
  console.log('cart/data event received:', payload);
});

---

checkout/initialized (listens)

Fired by the Checkout drop-in when the checkout page is first loaded. The GooglePay container uses this event as a fallback when checkout/updated has not yet been received — for example, when the shopper opens the Google Pay payment sheet without having interacted with the checkout form.

Event payload

CheckoutData | null

Example

import { events } from '@dropins/tools/event-bus.js';

events.on('checkout/initialized', (payload) => {
  console.log('checkout/initialized event received:', payload);
});

---

checkout/updated (listens)

Fired by the Checkout drop-in when the checkout state is updated. Used by the GooglePay container to determine the selected shipping method and billing address when the shopper clicks the Google Pay button. If checkout/updated has not yet been received, the container falls back to checkout/initialized.

At least one checkout/updated or checkout/initialized event must have been emitted on the event bus before clicking the Google Pay button.

Event payload

Cart | NegotiableQuote | null

See Cart and NegotiableQuote for the full type definitions.

Example

import { events } from '@dropins/tools/event-bus.js';

events.on('checkout/updated', (payload) => {
  console.log('checkout/updated event received:', payload);
});

---

payment-services/initialized/checkout (emits)

See Payment method availability.

---

payment-services/initialized/product-detail (emits)

See Payment method availability.