John Doe
123 Main Street
New York, NY 10001
+1 234 567 8900
Payment Method
Credit Card ending in 3456
Order Summary
👕
Classic Cotton T-Shirt
Black / M × 1
$29.99
👟
Running Shoes
Blue / 10 × 1
$89.99
⌚
Smart Watch Pro
Silver × 1
$199.99
Subtotal$319.97
Shipping$10.00
Tax$26.40
Total$356.37
69. 체크아웃 단계 UI
Design a multi-step checkout flow:
**Progress Indicator**:
- Horizontal stepper at top
- Steps: Information, Shipping, Payment, Review
- Icons or numbers
- Current: filled, Past: check, Future: outline
**Step Indicator Design**:
- Circles connected by lines
- Active step: brand color fill
- Completed: green check
- Connecting line: fills as progress
**Step 1: Customer Information**:
- Contact info: email, phone
- Or "Continue as Guest" option
- Sign in link for returning customers
**Step 2: Shipping Address**:
- Saved addresses (if logged in)
- Address form with autocomplete
- Address validation feedback
- Ship to different address toggle
**Step 3: Shipping Method**:
- Radio list of options
- Carrier + name + delivery estimate
- Price for each option
- Free shipping threshold message
**Step 4: Payment**:
- Saved cards (if logged in)
- Credit card form
- Digital wallets (Apple Pay, etc.)
- Billing same as shipping toggle
**Step 5: Review & Place Order**:
- Order summary
- Edit links for each section
- Terms checkbox
- Place Order button
**Order Summary Sidebar** (desktop):
- Persistent on right side
- Item list with images
- Collapsible on mobile
- Running total updates
**Trust Elements**:
- Security badges
- SSL indicator
- Money-back guarantee
- Customer support info
**Mobile Optimization**:
- Single column
- Sticky continue button
- Collapsible order summary
Tech: Next.js + React Hook Form + Stripe Elements + Tailwind