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.

Version: 3.0.0-beta1

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, event payload, and usage examples.

cart/reset (emits)

Emitted when the component state is reset.

Event payload

Example

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

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

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.

Example

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

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

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 }

Example

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

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

order/placed (emits)

Emitted when an order is placed.

Event payload

OrderDataModel

See OrderDataModel for full type definition.

Example

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

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

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;
  }[];
};