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.
Usage
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.