Skip to main content
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

PropertyTypeDescription
orderCheckoutOrderNormalized 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. 
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>
  );
}

​
Notes

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