Checkout Page
A contained checkout with contact, address search, delivery and card steps that tick off as they complete, beside a sticky order summary that places the order once everything is valid.
Preview
Contact (complete)
Shipping address (complete)
Suggestions from a sample address book.
Delivery (complete)
Payment
Your card is charged only when you confirm.
Order summary
3 items- Dot-grid plannerQuantity 1, A5 · ember cover$28.00
- Fineliner setQuantity 2, Pack of 4 · ink$25.00
- Subtotal
- $53.00
- Shipping
- Free
- Tax
- $4.24
- Total
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CheckoutItem[] | — | Line items for our CheckoutSummary. |
| shippingOptions | { id, label, eta, price }[] | — | Delivery options; the form and the summary stay in sync. |
| taxRate | number | — | Tax share passed to the summary. |
| currency | string | "USD" | ISO currency code. |
| discount | { label, amount } | — | Discount line in the summary. |
| addresses | AddressRecord[] | sample set | Records for our AddressInput search. |
| defaultEmail / defaultAddress | string / Partial<AddressValue> | — | Prefilled contact and address. |
| now | Date | — | Fixed now for card expiry checks (previews). |
| onPlaceOrder | (order) => Promise<string | void> | string | void | — | Called once every step is valid; resolve with an order id for the receipt. |
| brand | ReactNode | "Checkout" | Store mark in the header. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.