← Web Components

Web Components · Order

<mmm-order-detail>

Full order-detail page — line items, totals, addresses, payment, shipment tracking, and a full action menu (help, invoice, review, reorder, return, replace, rate, cancel). Each action emits a discrete event so your store integration can hook into individual flows.

Overview

Reads the active order from window.OrderStore keyed by the URL (/orders/{orderNo}/{accessToken}). Renders the full state — items, tax breakdown, addresses, payment method, shipments with carrier tracking, and return / replacement state. Each user action fires an event on window rather than navigating directly, so your store can intercept (open a modal, show a confirmation, hit your own endpoint).

When to use

  • On /orders/{orderNo}/{accessToken} as the post-purchase canonical view.
  • Inside a customer account layout linked from <mmm-order-list>.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-order-detail theme-mode="light"></mmm-order-detail>

Attributes

AttributeTypeDefaultDescription
theme-modestringlightOne of light or dark. Flips every default colour.
background-colorstringpalettePage background colour.
text-primary-colorstringtheme primary text / palettePrimary text colour (order number, item name, total).
text-secondary-colorstringtheme secondary text / paletteSecondary text (date, address line, label).
button-colorstringtheme button fill / palettePrimary CTA background.
button-color-hoverstringtheme button hover fill / palettePrimary CTA hover.
border-colorstringtheme border / paletteCard and divider colour.
input-stroke-colorstringtheme input stroke / paletteInput border colour (in review / return forms).

Events

13 events covering every distinct action a customer can take.

EventTargetPayload
order:help-requestedwindow{ order, item? }
order:invoice-downloadwindow{ order }
order:review-requestedwindow{ order, item }
order:reorder-requestedwindow{ order }
order:return-requestedwindow{ order, item, reason? }
order:replace-requestedwindow{ order, item, reason? }
order:rate-requestedwindow{ order }
order:cancel-requestedwindow{ order }
order:cancelledwindow{ order, response }
order:rating-submittedwindow{ order, rating }
order:review-submittedwindow{ order, item, review }
order:track-shipmentwindow{ order, shipment, carrier, trackingNumber }
order:track-replacementwindow{ order, replacement }

Live preview

store sample-store tag <mmm-order-detail>

Examples

1. Default light mode

<mmm-order-detail></mmm-order-detail>

2. Dark-mode account portal

<mmm-order-detail
  theme-mode="dark"
  background-color="#0e1011"
  text-primary-color="#fafafa"
  text-secondary-color="#9ca3af"
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  border-color="#2a2e33">
</mmm-order-detail>

3. Open a custom help modal instead of navigating

window.addEventListener('order:help-requested', (e) => {
  e.preventDefault?.();
  myHelpModal.open({ orderId: e.detail.order.id, sku: e.detail.item?.sku });
});

4. Hand off shipment tracking to your own page

window.addEventListener('order:track-shipment', (e) => {
  const { carrier, trackingNumber } = e.detail;
  location.href = `/tracking/${carrier}/${trackingNumber}`;
});