Back to Library
E-commerce

Checkout Flow — E-commerce

Multi-step checkout process with cart review, shipping, payment, and order confirmation.

Compatible with:

cursorlovableclaude
Create a multi-step checkout flow with these screens:

PROGRESS INDICATOR:
- Steps: Cart → Shipping → Payment → Confirmation
- Show current step highlighted
- Completed steps with checkmarks

STEP 1: CART REVIEW
- List of items with:
  * Product image
  * Name and variant
  * Quantity selector
  * Price
  * Remove button
- Subtotal, shipping, tax breakdown
- Total (prominent)
- "Continue to Shipping" button
- "Continue Shopping" link

STEP 2: SHIPPING
- Shipping address form:
  * Full name
  * Address line 1 & 2
  * City, State, ZIP
  * Country dropdown
  * Phone number
- "Save address" checkbox
- Shipping method selection (radio buttons):
  * Standard (5-7 days) - Free
  * Express (2-3 days) - $9.99
  * Overnight - $24.99
- Order summary sidebar (sticky)
- "Continue to Payment" button

STEP 3: PAYMENT
- Payment method tabs: Credit Card, PayPal, Apple Pay
- Credit card form:
  * Card number
  * Expiration date
  * CVV
  * Cardholder name
- Billing address (checkbox: "Same as shipping")
- Order summary sidebar
- "Place Order" button (large, prominent)
- Security badges (SSL, payment icons)

STEP 4: CONFIRMATION
- Success icon/animation
- "Order Confirmed!" message
- Order number
- Email confirmation message
- Order summary
- Estimated delivery date
- "Track Order" button
- "Continue Shopping" button

STYLING:
- Clean, trustworthy design
- Clear visual hierarchy
- Form validation with error messages
- Loading states on buttons
- Mobile responsive
- Secure/professional appearance

How to Use

  1. 1Click the "Copy Prompt" button above
  2. 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
  3. 3Paste the prompt and let the AI generate your UI
  4. 4Customize the output to match your brand and content

💡 Tips

Integrate with payment gateway (Stripe, PayPal). Add proper form validation. Implement address autocomplete. Save cart state to prevent loss.

Related Prompts