wtf( )unctionsystem design, drawn
← all problemsPaymentsMedium

The prettier checkout that widened the audit

A team built their own card form for a nicer checkout: card number, expiry and CVC collected in their React app, posted to their API over TLS, forwarded to the payment provider.

Nothing is stored. The audit still moved them onto the full assessment with quarterly scans and network segmentation evidence — because compliance follows anything that stores, processes *or transmits* card data.

Redraw the card-data path so it never crosses your server.
Components — tap one, then tap a slot on the diagram
!The auditor moved you from the short self-assessment to the full one, with quarterly scans.

Boundaries, outermost first: Card data: Payment provider Outside every boundary: Browser (the customer), Your API (should stay outside; FAILED: in scope), an empty slot for the where the card is typed Connections: Browser calls where the card is typed — card details (step 1) where the card is typed calls Payment provider — direct to provider (step 2) Payment provider calls Your API — token only (step 3) Browser must NOT reach Your API — card must not pass through here

Payment provider
Browserthe customer
Your APIshould stay outsidein scope