All components
CheckoutSummary
Order total breakdown for the checkout sidebar — items + subtotal + tax + shipping + total.
components/checkout-summary.tsxPeer deps:
Live preview
Order summary
- $98.00
Linen Tee
Qty 2
- $149.00
Raw Denim Jacket
Qty 1
- Subtotal
- $247.00
- STEEP10
- -$10.00
- Shipping
- Free
- Tax
- $21.00
Total$258.00
Usage
import { CheckoutSummary } from "@/components/checkout-summary";
<CheckoutSummary
items={cart.items.map((i) => ({
productId: i.id,
name: i.name,
quantity: i.quantity,
unitPriceCents: i.price,
}))}
subtotalCents={cart.subtotal}
discountCents={cart.discount}
shippingCents={cart.shipping}
taxCents={cart.tax}
totalCents={cart.total}
/>