Design Stripe Checkout – Frontend System Design
We’ll walk through the frontend system design for Stripe Checkout: a PCI-safe pay page that never sees a card number, that survives a double-click, that comes back from a 3DS redirect with the right status, and that still looks like your product. You’ll see when to redirect to a Stripe-hosted page, when to embed Checkout, when to own the layout with the Payment Element, and why a green success URL is not a receipt.
This is not “put a card form in React.” A custom <input> for the PAN is how you leave SAQ A. The interviewer is checking whether you can pick an integration surface, keep card data off your origin, and describe the PaymentIntent state machine without designing Stripe’s ledger.
Problem Statement
Design the frontend for a checkout that charges cards, wallets, and local payment methods through Stripe.
Requirements:
- Customers pay for a cart of line items, with tax and a shipping address
- Card numbers never touch your DOM, logs, or servers
- Apple Pay, Google Pay, and Link appear when the... premium content.
