> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# useCheckoutOrder

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

## **Import**

```typescript theme={"system"}
import { useCheckoutOrder } from '@ollie-shop/sdk';
```

## **Return Value**

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

<Info>
  For detailed type definitions including `FulfillmentOrder`, `OrderItem`, `OrderCustomer`, and more, see the [Checkout Order Types](/ollie-shop/api/checkout-order-types) reference.
</Info>

## **Usage**

```typescript theme={"system"}
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.

<Tabs>
  <Tab title="index.tsx">
    ```typescript theme={"system"}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="styles.module.css">
    ```css theme={"system"}
    .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;
    }
    ```
  </Tab>
</Tabs>

## **Notes**

* This hook is only available on the order confirmation page (after successful checkout)
* See [Checkout Order Types](/ollie-shop/api/checkout-order-types) for complete type definitions