Get Started

A complete order confirmation page in 30 lines.

Page Setup

Two prerequisites:

The URL must contain ?ref_id=ORDER_ID so the SDK knows which order to load.
The page should be marked as a receipt-style page so analytics can pick it up.

<head>
  <meta name="next-page-type" content="receipt">
  <script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/[email protected]/dist/loader.js" type="module"></script>
</head>

The order is loaded automatically. There is nothing to configure.

Loading State

Orders have three load states. Always handle all three.

<!-- Loading -->
<div data-next-show="order.isLoading">
  <p>Loading your order...</p>
</div>

<!-- Error -->
<div data-next-show="order.hasError">
  <p>Unable to load order</p>
  <p data-next-display="order.errorMessage">-</p>
</div>

<!-- Success -->
<div data-next-show="order.exists" data-next-hide="order.isLoading">
  <!-- order content -->
</div>

Confirmation Content

<div data-next-show="order.exists">
  <h1>Thank you for your order!</h1>

  <p>Order #<span data-next-display="order.number">-</span></p>
  <p>Reference: <span data-next-display="order.refId">-</span></p>
  <p>Placed: <span data-next-display="order.createdAt">-</span></p>

  <h3>Customer</h3>
  <p>
    <span data-next-display="order.customer.name">-</span><br>
    <span data-next-display="order.customer.email">-</span>
  </p>

  <h3>Shipping Address</h3>
  <address data-next-display="order.shippingAddress.full">-</address>

  <h3>Order Summary</h3>
  <p>Subtotal: <span data-next-display="order.subtotal">$0.00</span></p>

  <p data-next-show="order.hasShipping">
    Shipping: <span data-next-display="order.shipping">$0.00</span>
  </p>

  <p data-next-show="order.hasTax">
    Tax: <span data-next-display="order.tax">$0.00</span>
  </p>

  <p>
    <strong>Total: <span data-next-display="order.total">$0.00</span></strong>
  </p>
</div>

Verify It Is Working

Load the page with a real ?ref_id= from a completed test order.

You should see:

Console: [OrderStore] Order loaded { refId: 'ORD-1234' }
Customer name, address, and totals populated
The <html> element gets the next-loaded class once the API call resolves

If the order does not load:

Check the URL has ?ref_id= with a valid order
Check the network tab for the API response
Verify meta[name="next-page-type"] is set to receipt (some SDK versions require it for order-loading)

Order data lives in orderStore which has a 15-minute expiry. After 15 minutes, order.isExpired becomes true and the data is cleared on the next page load. For long-lived receipts, use the URL ref_id to re-fetch.

Next Steps

All readable properties: Properties
Render line items with templates: Order Items Template
Full attribute reference: Reference → Attributes

Page Setup

Loading State

Confirmation Content

Verify It Is Working

Next Steps

On this page