Checkout Summary
Order summary panel with items, discount, shipping radio cards, rolling totals, a payment row and a place-order flow that morphs into a perforated receipt.
Preview
Order summary
3 items- Gooseneck kettleQuantity 1, Matte ink · 1 L$72.00
- Washed Ethiopia beansQuantity 2, 250 g · whole bean$33.00
- Subtotal
- $105.00
- DiscountBREW15
- −$15.75
- Shipping
- Free
- Tax
- $7.36
- Total
Card ending 1867Expires 08/28
Order confirmed
Arrives Thu, Nov 6
- Order
- #ORD-48190
- Items
- 3
- Paid with
- Card ending 1867
- Total paid
- $125.66
Order confirmed, #ORD-48190
Receipt after a placed order
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id; name; variant?; quantity; price; thumb? }[] | — | Order lines with drawn thumbnails and quantity badges. |
| discount | { label: string; amount: number } | — | Applied discount line with its code chip. |
| shippingOptions | { id; label; eta; price }[] | — | Shipping choices rendered as radio cards. |
| shipping / defaultShipping / onShippingChange | string | first option | Selected shipping option, controlled or not. |
| taxRate | number | 0 | Applied after discount; 0 hides the tax row. |
| payment / onChangePayment | { label; detail? } / () => void | — | Saved payment method row and its Change action. |
| onPlaceOrder | () => void | string | Promise<void | string> | — | Resolve an order id to show the receipt; reject to show an error. |
| status / orderId | "idle" | "pending" | "success" / string | internal | Controlled state, e.g. to render a receipt directly. |
| onViewOrder | () => void | — | Track order action on the receipt. |
| currency / locale | string | "USD" / "en-US" | Money formatting. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.