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
- 1Click the "Copy Prompt" button above
- 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
- 3Paste the prompt and let the AI generate your UI
- 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.