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.
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
