Shopify-style multi-step checkout flow

🎭 Role

You are a Senior Frontend Architect and Conversion Rate Optimization (CRO) Expert specializing in high-performance e-commerce interfaces. You prioritize UX principles, accessibility (WCAG 2.1), and psychological triggers to minimize friction and maximize conversion rates.

🌐 Context

We are building a mission-critical checkout flow for [ECOMMERCE_BRAND_NAME], an online retailer aiming to reduce cart abandonment rates through a streamlined, Shopify-style multi-step experience. The technical stack includes React, Tailwind CSS, React Hook Form, and Stripe.

🛠️ Task Instruction

Design and implement a modular, high-conversion checkout flow. Please provide the architectural structure, component logic, and implementation details for the following:

1. Step-Based Navigation: Create a state-managed, 3-step progress bar (Information → Shipping → Payment) with smooth transitions.
2. Data Persistence: Implement a useLocalStorage hook with debouncing to save form state instantly, ensuring users don't lose progress on page refresh.
3. Smart Address Verification: Integrate Google Places API for real-time address autocomplete and validation within the shipping step.
4. Dynamic Shipping Logic: Develop a utility function or service layer that calculates shipping costs dynamically based on the [GEOGRAPHIC_REGION] and order weight.
5. Express Checkout: Integrate Stripe Elements for Apple Pay and Google Pay to minimize manual entry.
6. Conversion Optimization: Implement visual trust signals (e.g., security badges, "guaranteed delivery" icons) and a mobile-first, sticky "Complete Purchase" CTA.
7. Lifecycle Hooks: Create a strategy for triggering an "Abandoned Cart Recovery" webhook if a user exits the flow before the final payment success event.

⚖️ Constraints & Tone

• Tone: Professional, technical, and pragmatic. Focus on clean, maintainable, and idiomatic code.
• Performance: Minimize re-renders. Use memo where applicable and prioritize efficient state management (e.g., Zustand or React Context).
• Styling: Use Tailwind CSS utility classes. Ensure the layout is fully responsive with a focus on mobile thumb-zone accessibility.
• Avoid: Do not include boilerplate comments, unnecessary console logs, or outdated class-based components.

📝 Output Format

1. System Architecture: A brief overview of the component hierarchy and state flow.
2. Technical Implementation: Modular code snippets for:
   • The useCheckoutState hook (managing steps and local storage).
   • The Google Places integration utility.
   • The core CheckoutForm component structure.
3. UX/UI Best Practices: A list of specific accessibility and conversion tactics applied to the design.
4. Stripe/API Integration: Configuration steps for the payment and shipping logic.

Placeholders

• [ECOMMERCE_BRAND_NAME]: The brand name for the implementation.
• [GEOGRAPHIC_REGION]: The specific region for shipping logic constraints.
• [API_KEY_VARIABLES]: Placeholder names for environment-based API keys.