Order Data & Events

The Order drop-in emits order placement events and resets the cart after successful checkout, coordinating the transition from cart to order confirmation.

Version: 1.4.0

Tip

For information about event architecture, subscription patterns, and best practices, see the Events guide.

Events reference

Drop-ins communicate via the event bus.

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

cart/reset (emits)

Emitted when the component state is reset.

Event payload

void

Usage

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)

Emitted when order data is loaded or updated. This includes order details, items, shipping information, and payment status.

Event payload

OrderDataModel

See OrderDataModel for full type definition.

Usage

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 during order operations such as fetching order details, reordering items, or processing returns.

Event payload

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

Usage

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.

Event payload

OrderDataModel

See OrderDataModel for full type definition.

Usage

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

Data Models

The following data models are used in event payloads for this drop-in.

OrderDataModel

Used in: order/data, order/placed.

type OrderDataModel = {
  giftReceiptIncluded: boolean;
  printedCardIncluded: boolean;
  giftWrappingOrder: {
    price: MoneyProps;
    uid: string;
  };
  placeholderImage?: string;
  returnNumber?: string;
  id: string;
  orderStatusChangeDate?: string;
  number: string;
  email: string;
  token?: string;
  status: string;
  isVirtual: boolean;
  totalQuantity: number;
  shippingMethod?: string;
  carrier?: string;
  orderDate: string;
  returns: OrdersReturnPropsModel[];
  discounts: { amount: MoneyProps; label: string }[];
  coupons: {
    code: string;
  }[];
  payments: {
    code: string;
    name: string;
  }[];
  shipping?: { code: string; amount: number; currency: string };
  shipments: ShipmentsModel[];
  items: OrderItemModel[];
  totalGiftCard: MoneyProps;
  grandTotal: MoneyProps;
  grandTotalExclTax: MoneyProps;
  totalShipping?: MoneyProps;
  subtotalExclTax: MoneyProps;
  subtotalInclTax: MoneyProps;
  totalTax: MoneyProps;
  shippingAddress: OrderAddressModel;
  totalGiftOptions: {
    giftWrappingForItems: MoneyProps;
    giftWrappingForItemsInclTax: MoneyProps;
    giftWrappingForOrder: MoneyProps;
    giftWrappingForOrderInclTax: MoneyProps;
    printedCard: MoneyProps;
    printedCardInclTax: MoneyProps;
  };
  billingAddress: OrderAddressModel;
  availableActions: AvailableActionsProps[];
  taxes: { amount: MoneyProps; rate: number; title: string }[];
  appliedGiftCards: {
    code: string;
    appliedBalance: MoneyProps;
  }[];
};