checkout-flow

name	checkout-flow
description	E-commerce checkout design, payment UX, cart design, conversion optimization, and trust signals.
triggers	["checkout","payment UX","cart design","e-commerce","conversion"]

Checkout Flow

The Rule: Fewer Steps = Higher Conversion

• Guest checkout option (always)
• Single-page checkout when possible
• If multi-step: show progress, allow editing previous steps without losing data

Cart Design

• Show item image, name, quantity, price
• Easy quantity adjustment (+ / - or input)
• Remove item with confirmation
• Show subtotal, taxes, shipping, and total clearly
• Promo code field (collapsed by default, not prominent)

Payment Form

• Card number: auto-format with spaces (4242 4242 4242 4242)
• Expiry: MM/YY format with auto-slash
• CVC: show where to find it on the card (tooltip with diagram)
• Show accepted card types (Visa, Mastercard, etc.)
• Support digital wallets (Apple Pay, Google Pay) above the form

Trust Signals

• Security badges near payment fields
• "Secure checkout" in the header
• Money-back guarantee
• Customer support contact visible
• SSL indicator

Order Summary

• Visible throughout checkout (sidebar on desktop, expandable on mobile)
• Update in real-time as user changes options
• Show shipping estimate before final step
• Clear total breakdown (no surprises)

Post-Purchase

• Confirmation page with order number
• Confirmation email immediately
• Clear delivery timeline
• Easy access to order status