Next Billing Form

Checkout Steps

Step indicator showing Cart → Shipping → Payment → Confirmation.

This page is a scaffold for the Checkout Steps component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • Step indicator (1. Info → 2. Shipping → 3. Payment → 4. Review)
  • Horizontal stepper
  • Completed / active / upcoming states
  • Click to go back to step
  • Mobile condensed variant
8

Billing Form

Full billing address form with field validation.

Shipping Form

Shipping address form with same-as-billing checkbox.

Payment Method

Payment option selector: card, bank transfer, e-wallet, and COD.

Order Summary

Sticky checkout sidebar with item list and totals.

Order Tracking

Status timeline for tracking order from placement to delivery.

Invoice View

Printable invoice layout with order details and line items.

Payment Status

Pending, processing, success, and failed payment status screens.

Order Success

Post-purchase confirmation page with order number and next steps.
Next Billing Form