Shopping Cart Persistence Sequence Diagram

sequenceDiagram participant User as User (Browser) participant JS as Frontend JS participant LS as localStorage participant API as Backend API participant Store as Server Storage (Session/DB) participant StripeJS as Stripe.js (Client) participant StripeAPI as Stripe API (Backend) User->>JS: Add item to cart JS->>LS: Write cart to localStorage JS->>API: Debounced sync (POST /sync-cart) API->>Store: Save/merge cart Store-->>API: Confirm save API-->>JS: Sync result JS-->>User: Update cart UI User->>JS: Reloads page or returns later JS->>LS: Read cart from localStorage LS-->>JS: Cart data JS-->>User: Render cart UI User->>JS: Remove item from cart JS->>LS: Update cart in localStorage JS->>API: Debounced sync (POST /sync-cart) API->>Store: Update cart in storage Store-->>API: Confirm update API-->>JS: Sync result JS-->>User: Update cart UI User->>JS: Proceeds to checkout JS->>LS: Read cart from localStorage JS->>API: POST /checkout (cart data) API->>Store: Validate and process cart Store-->>API: Confirm/deny checkout API->>StripeAPI: Create PaymentIntent StripeAPI-->>API: PaymentIntent client_secret API-->>JS: Return client_secret JS->>StripeJS: Confirm payment with client_secret StripeJS->>StripeAPI: Complete payment StripeAPI-->>StripeJS: Payment result StripeJS-->>JS: Payment result JS-->>User: Show confirmation or error