useCheckoutOrder

Use this hook when you need the placed order on the order confirmation page. It’s useful for custom thank-you components, order summaries, and confirmation-page tracking.

Let your agent build it. The Ollie Shop skill ships with projects created by npx create-ollie-shop and knows this hook only resolves on the order confirmation route.

Prompt

Build a custom order confirmation component.

Don’t have the skill yet? Install it.

Import

import { useCheckoutOrder } from '@ollie-shop/sdk';

Return Value

Property	Type	Description
`order`	`CheckoutOrder`	The normalized order: `id`, `sessionId` and `fulfillmentOrders`
`raw`	`unknown`	The order as the platform returned it, before normalization

For the shape of CheckoutOrder, FulfillmentOrder and the types they contain, see the Checkout Order Types reference.

Where it works

The order is only loaded on the order confirmation route, so this hook only returns data for components placed in the slots of that page (see the Slots Catalog, “Order confirmation”). The page fetches the order while it renders, and the hook suspends the component until the order arrives: the page’s own loading state covers that moment, so you do not need a loading branch. Anywhere else, order is an empty object and reading order.fulfillmentOrders[0] throws. Keep order components in the confirmation slots.

Usage

const { order } = useCheckoutOrder();

console.log(order.id);                 // Order ID
console.log(order.fulfillmentOrders);  // One entry per fulfillment, usually a single one

Example

Display an order summary on a custom order page.

index.tsx
styles.module.css

import { useCheckoutOrder } from '@ollie-shop/sdk';
import styles from './styles.module.css';

function ThankYouPage() {
  const { order } = useCheckoutOrder();

  const fulfillment = order.fulfillmentOrders[0];
  const { customer, totals, orderItems, locale } = fulfillment;

  // Amounts are in minor units (cents)
  const formatCurrency = (value: number) =>
    new Intl.NumberFormat(locale.language, {
      style: 'currency',
      currency: locale.currency,
    }).format(value / 100);

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>
        Thank you, {customer.firstName}!
      </h1>
      <p className={styles.orderId}>
        Your order <strong>#{order.id}</strong> has been placed.
      </p>

      <h2 className={styles.subtitle}>Order Summary</h2>
      <ul className={styles.itemList}>
        {orderItems.map((item) => (
          <li key={item.uniqueId} className={styles.item}>
            {item.name} x {item.quantity}
          </li>
        ))}
      </ul>

      <p className={styles.total}>
        Total: {formatCurrency(totals.total)}
      </p>
    </div>
  );
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.orderId {
  color: #666;
  margin-bottom: 24px;
}

.subtitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.itemList {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.total {
  font-size: 18px;
  font-weight: 600;
}

Notes

A store configured to use the platform’s own success page redirects before the order page renders, so this hook never runs there.
raw is platform-specific and not covered by the SDK types; prefer order and fall back to raw only for data the normalized order does not carry.
See Checkout Order Types for complete type definitions.

Overview

Start Here

AI Coding Agents

Core Concepts

Customization

Ollie Studio

Functions

CLI Reference

Ollie SDK

Analytics & Scripts

Tools & Tips

Product updates

Import

Return Value

Where it works

Usage

Example

Notes

​Import

​Return Value

​Where it works

​Usage

​Example

​Notes

Import

Return Value

Where it works

Usage

Example

Notes