Order Data & Events

The Order 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: 1.4.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
cart/reset	Emits	Emitted when the component state is reset
order/error	Emits	Emitted when an error occurs
order/placed	Emits	Emitted when an order is placed
order/data	Emits and listens	Triggered when data is available or changes

Event details

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

cart/reset (emits)

Emitted when the component state is reset

Data payload

void

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();

order/data (emits and listens)

Triggered when data is available or changes

Data payload

OrderDataModel

Usage

Listen to this event in your storefront:

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

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

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

order/error (emits)

Emitted when an error occurs

Data payload

{ source: string; type: string; error: Error | string }

Property	Type	Description
source	string	See type definition in source code
type	string	See type definition in source code
error	Error | string	See type definition in source code

Usage

Listen to this event in your storefront:

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

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

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

order/placed (emits)

Emitted when an order is placed

Data payload

OrderDataModel

Usage

Listen to this event in your storefront:

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

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

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