Order Data

Order data attributes display post-purchase order information on confirmation, upsell, and receipt pages. The order is loaded automatically when the URL contains ?ref_id=ORDER_ID.

How It Works

The page loads with ?ref_id=ORD-1234 in the URL.
The SDK detects the parameter, fetches the order from the API, and stores it in orderStore.
Every data-next-display="order.<property>" element on the page populates with the live data.
CSS classes (next-loading, next-loaded, next-error) reflect the load state.

Quick Example

<div data-next-show="order.exists">
  <h1>Thank you, <span data-next-display="order.customer.firstName">Friend</span>!</h1>

  <p>Order #<span data-next-display="order.number">-</span></p>
  <p>Total: <span data-next-display="order.total">$0.00</span></p>

  <address data-next-display="order.shippingAddress.full">-</address>
</div>

Get Started

A working order confirmation page in 30 lines.

Properties

All order, customer, address, financial, and attribution properties.

Order Items Template

Use data-next-order-items to render line items with a template.

Reference

All order.* paths in one searchable table.