Checkout Steps
Four-step checkout stepper: the connector fills toward the next node while each summary panel slides in from the right, ending on a placed order with a check.
Usage
The import and the props worth knowing about, in one place.
import { Commerce32 } from "@/components/beste/piece/commerce32";
<Commerce32
steps={[
{
"label": "Cart",
"lines": [
"Two items",
"Blue Note Vinyl, Tote Bag",
"Subtotal $58.00"
]
},
{
"label": "Shipping",
"lines": [
"Nina Simone",
"12 Jazz Lane, New Orleans",
"Express, arrives Thursday"
]
},
{
"label": "Payment",
"lines": [
"Visa ending 4417",
"Billing matches shipping",
"Total $64.50"
]
},
{
"label": "Done",
"lines": [
"Order 4821 placed",
"Confirmation sent to hello@beste.co"
]
}
]}
tone="primary"
/>More Commerce pieces
View all Commerce- Order placedApr 20, 2:14pm
- PackedApr 21, 9:00am
- ShippedApr 21, 4:30pm
- DeliveredEstimated Apr 22
Order Tracking
Vertical shipment status with check, spinning, and pending dots connected by a tone-colored line, each row showing label and timestamp.
- OrderedMon 09:12
- PackedMon 14:40
- ShippedTue 08:05
- Out for deliveryWed 07:30
- DeliveredWed 11:52
Order Tracking
Vertical delivery timeline where each stop lights up in turn as the connector fills downward and a timestamp fades in, pausing on Delivered before it replays.
Pay in Installments
Buy-now-pay-later card with provider header, four-dot installment timeline where paid steps fill in tone and the line progresses, plus a fineprint footer.
Receipt Lines
Dashed-border receipt with the store name and order id, three monospaced quantity-name-price rows, a subtotal, and a bold final total with payment method.
