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.
Emits Reference
Events produced by this drop-in that you can subscribe to.
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 |
Listens Reference
Emits and Listens Reference
Bidirectional events that both emit state changes and listen for external updates.
Event | Direction | Description |
---|---|---|
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 listeningcartResetListener.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 listeningorderErrorListener.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 listeningorderPlacedListener.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 listeningorderDataListener.off();