Checkout Data & Events

The Checkout drop-in uses the event bus to emit and listen to events for communication between drop-ins and external integrations. For common events shared across multiple drop-ins (such as locale, error, authenticated, etc.), see the Common events reference.

Version: 2.1.0

Tip

New to drop-in events? Learn about the event system architecture, including the publish-subscribe pattern, subscription configuration, and best practices for event handling.

Events reference

Event	Direction	Description
checkout/values	Emits	Emitted when form or configuration values change
cart/initialized	Listens	Fired by Cart (cart) when the component completes initialization
cart/merged	Listens	Fired by Cart (cart) when data is merged
cart/reset	Listens	Fired by Cart (cart) when the component state is reset
cart/data	Emits and listens	Triggered when data is available or changes
checkout/error	Emits and listens	Triggered when an error occurs
checkout/initialized	Emits and listens	Triggered when the component completes initialization
checkout/updated	Emits and listens	Triggered when the component state is updated
shipping/estimate	Emits and listens	Triggered when an estimate is calculated

Event details

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

cart/data (emits and listens)

Triggered when data is available or changes

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const cartDataListener = events.on('cart/data', (data) => {
  console.log('cart/data event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
cartDataListener.off();

cart/initialized (listens)

Fired by Cart (cart) when the component completes initialization

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const cartInitializedListener = events.on('cart/initialized', (data) => {
  console.log('cart/initialized event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
cartInitializedListener.off();

cart/merged (listens)

Fired by Cart (cart) when data is merged

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const cartMergedListener = events.on('cart/merged', (data) => {
  console.log('cart/merged event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
cartMergedListener.off();

cart/reset (listens)

Fired by Cart (cart) when the component state is reset

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const cartResetListener = events.on('cart/reset', (data) => {
  console.log('cart/reset event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
cartResetListener.off();

checkout/error (emits and listens)

Triggered when an error occurs

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const checkoutErrorListener = events.on('checkout/error', (data) => {
  console.log('checkout/error event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
checkoutErrorListener.off();

checkout/initialized (emits and listens)

Triggered when the component completes initialization

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const checkoutInitializedListener = events.on('checkout/initialized', (data) => {
  console.log('checkout/initialized event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
checkoutInitializedListener.off();

checkout/updated (emits and listens)

Triggered when the component state is updated

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const checkoutUpdatedListener = events.on('checkout/updated', (data) => {
  console.log('checkout/updated event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
checkoutUpdatedListener.off();

checkout/values (emits)

Emitted when form or configuration values change

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const checkoutValuesListener = events.on('checkout/values', (data) => {
  console.log('checkout/values event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
checkoutValuesListener.off();

shipping/estimate (emits and listens)

Triggered when an estimate is calculated

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

const shippingEstimateListener = events.on('shipping/estimate', (data) => {
  console.log('shipping/estimate event received:', data);
  // Add your custom logic here
});

// Later, when you want to stop listening
shippingEstimateListener.off();