useCheckoutOrder - Ollie Shop

Use this hook when you need to access order data after checkout completion. It’s useful for building custom order confirmation components.

Import

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

Return Value

Property	Type	Description
`order`	`CheckoutOrder`	Normalized order data containing id, sessionId, and fulfillmentOrders

For detailed type definitions including FulfillmentOrder, OrderItem, OrderCustomer, and more, see the Checkout Order Types reference.

Usage

const { order } = useCheckoutOrder();

console.log(order.id); // Order ID
console.log(order.fulfillmentOrders); // Fulfillment details

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 } = fulfillment;

  function formatCurrency(value: number, currency: string) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      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.id} className={styles.item}>
            {item.name} x {item.quantity}
          </li>
        ))}
      </ul>

      <p className={styles.total}>
        Total: {formatCurrency(totals.total, fulfillment.locale.currency)}
      </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

This hook is only available on the order confirmation page (after successful checkout)
See Checkout Order Types for complete type definitions

​Import

​Return Value

​Usage

​Example

​Notes

Import

Return Value

Usage

Example

Notes