React Checkout Page
A full-page composition, not a single widget: the distributor checkout flow assembled from the pieces you already have. A numbered rail runs contact → shipping address → shipping method → payment, while the order summary sits sticky on the right. The shipping selector is wired to the total — switch to Expedited and the summary's shipping line and the Pay button both update. Payment is the same PaymentForm (card or purchase order), and placing the order surfaces a confirmation. This is how the commerce components come together into a page you could ship.
AXM Components · Secure checkout
Checkout
Contact
Shipping address
Shipping method
Payment
Installation
Composition
The page is deliberately thin glue over installable components:
| Piece | Source | Role |
|---|---|---|
| OrderSummary | order-summary | Sticky rail; receives shipping from the method selector |
| PaymentForm | payment-form | Step 4; amount bound to the live total |
| Field / Input | input | Contact + shipping-address fields |
| Shipping selector | inline role="radiogroup" | Drives shipping, which flows into the total |
Cart quantity (with MOQ / pack-multiple rules), shipping method, and payment method are the only state; the total is derived, so every control stays in sync. Replace the demo line items and address defaults with your own data and handlers.