Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
npx create-ollie-shop and knows this hook only resolves on the order confirmation route.Build a custom order confirmation component.
import { useCheckoutOrder } from '@ollie-shop/sdk';
| Property | Type | Description |
|---|---|---|
order | CheckoutOrder | Normalized order data containing id, sessionId, and fulfillmentOrders |
FulfillmentOrder, OrderItem, OrderCustomer, and more, see the Checkout Order Types reference.const { order } = useCheckoutOrder();
console.log(order.id); // Order ID
console.log(order.fulfillmentOrders); // Fulfillment details
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;
}