UI Checkout Flows Catalog

Five complete checkout journeys — Cart → Shipping → Payment → Review → Confirmation — with working step transitions. Unlike the isolated pieces in ui/ecommerce/, each pattern here is a navigable end-to-end flow. See CATALOG.md for recipes.

.coflow-classic

Classic Stepper

Full-width card with horizontal progress across all five stages and Back / Continue.

  1. Cart
  2. Shipping
  3. Payment
  4. Review
  5. Done

Your cart

  • Ridge Daypack

    Forest · 28 L

    1
    $128

  • Trail Cap

    Slate · One size

    1
    $32
Subtotal$160.00
ShippingCalculated next
Total$160.00
.coflow-split

Split Sticky Summary

Two-column layout: stepped form left, sticky order summary right (stacks on narrow).

  1. Cart
  2. Shipping
  3. Payment
  4. Review
  5. Done

Cart

  • Ridge Daypack

    Forest · 28 L

    1
    $128

  • Trail Cap

    Slate · One size

    1
    $32
.coflow-accordion

Accordion Journey

Single page with five <details> sections; future steps stay locked until Continue.

Cart Current

  • Ridge Daypack

    Forest · 28 L

    1
    $128

  • Trail Cap

    Slate · One size

    1
    $32
Subtotal$160.00
Total$160.00
Shipping
Payment
Review
Ship to

Avery Chen · 18 Harbor Way · Portland, OR 97205

Items

Ridge Daypack ($128) · Trail Cap ($32)

Subtotal$160.00
Shipping$0.00
Tax$12.80
Total$172.80
.coflow-sheet

Mobile Sheet Stack

Phone-framed cart bottom-sheet that expands into full-screen shipping → payment → review → confirmation.

Northstar Outfitters

Your trail kit is ready.

Cart · 2 items

Free ship

  • Ridge Daypack

    Forest

    1
    $128

  • Trail Cap

    Slate

    1
    $32
Subtotal$160.00
.coflow-express

Express Fast Track

Full five-stage journey led by wallet buttons and guest email; compact saved address + express pay.

  1. Cart
  2. Shipping
  3. Payment
  4. Review
  5. Done

2 items · $160.00 · Northstar Outfitters

  • Ridge Daypack

    Qty 1

    $128

  • Trail Cap

    Qty 1

    $32