18 / Commerce

Commerce — checkout, payments, shipping

Eight commerce scenes used across the Oak Flats workshop site. Cart, checkout, order confirmation, shipping tracker, pricing, gift cards, wallet, and saved payment methods — built from twelve focused commerce primitives.

Production answer

Commerce — checkout, payments, shipping is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Commerce — checkout, payments, shipping states
Generative search brief

Commerce — checkout, payments, shipping: Eight commerce scenes used across the Oak Flats workshop site. Cart, checkout, order confirmation, shipping tracker, pricing, gift cards, wallet, and saved payment methods — built from twelve focused commerce primitives.

Visual reference only — no real transactions wired
Scene 01

Cart

Live cart scene — five exhaust system rows, quantity steppers, summary aside, save-for-later tray.

Stateful · quantityOpen
Scene 02

Checkout

Horizontal stepper with address recap, payment method row, and order review surface.

Stateful · stepperOpen
Scene 03

Order confirmation

Post-order confirmation, shipping progress, recommended-products row, invoice download CTA.

Visual onlyOpen
Scene 04

Shipping tracker

Standalone tracker — shipping progress, carrier event feed, dispatch map placeholder.

Visual onlyOpen
Scene 05

Pricing

Workshop subscription tiers — monthly / annual / lifetime toggle, three feature-matched tier cards.

Stateful · toggleOpen
Scene 06

Gift card

Gift card redeem hero with segmented code input, balance reveal, and recent redemptions list.

Stateful · pasteOpen
Scene 07

Wallet

Customer wallet — credit balance hero, multi-currency rows, top-up CTA, payout options.

Visual onlyOpen
Scene 08

Payments

Saved payment methods — Visa, Mastercard, Amex, PayPal, Afterpay tiles + add-method CTA.

Visual onlyOpen