What this prompt does
This prompt makes the AI a senior conversion-focused frontend engineer specifying a 3-step checkout tightly enough to build, and it asks for working component code rather than pseudocode. The steps are cart review with quantity edit, discount field, and live total recalculation; shipping and billing with address autocomplete, saved addresses, and a guest path; and payment supporting express wallets plus card with inline validation and decline recovery. A persistent progress indicator, sticky order summary, trust badges, and an abandoned-step recovery hook round it out. The [wallets] placeholder sets express options, and [cart_size] frames the typical order.
The structure works because checkout is where money quietly leaks, and one confusing step or a swallowed card error loses the sale. The prompt forces decline recovery to be explicit, since that is where most lost revenue hides, and it requires accessible markup with labelled fields, an aria-live error region, and keyboard-navigable steps. The [stack] variable produces the checkout component files plus a state-flow note describing how step data persists between steps. The persistent progress indicator and sticky order summary keep the buyer oriented and reassured about the total at every step, removing the uncertainty about how much is left to do or what they will be charged that pushes people to abandon a cart mid-flow.
When to use it
- Building or rebuilding a checkout to reduce abandonment
- Supporting express wallets via
[wallets]plus card payment - Designing for a typical
[cart_size]and order pattern - You need explicit card decline recovery, not a swallowed error
- Adding a guest path, saved addresses, and address autocomplete
- Persisting step data with an abandoned-step recovery hook
Example output
You get the checkout component files plus a short state-flow note describing how step data is persisted between steps. Step one handles cart review with live total recalculation; step two handles shipping/billing with autocomplete, saved addresses, and a guest path; step three handles payment across your express wallets and card with inline validation and decline recovery. A persistent progress indicator and sticky order summary appear on every step, with trust badges and accessible markup throughout.
Pro tips
- List the exact
[wallets]you support; the payment step is generated around those express options plus card - Set
[cart_size]to your real average so the order summary and copy match typical orders - Wire up step-three decline recovery first, since that is where most lost revenue hides
- Keep
[stack]accurate so the component files and the state-flow note fit your payment integration - Ask the model to detail the abandoned-step recovery hook, since resuming a saved checkout recovers otherwise-lost sales
- Confirm the accessible error handling uses an aria-live region so screen-reader users hear validation failures
