Stripe Checkout — choose an integration, then configure it
[model draft]Stripe splits evaluation into two distinct screens: first an effort-sorted chooser ('No code' vs 'UI components') with a single shared demo CTA, then a live checkout preview beside grouped feature toggles that mutate the form in real time.
Step 1 of 2
Stripe — integration chooser- component pattern · model draftTwo cards, each a picture, a tag (No code · Low code / More code), a name and two bullets; the selected card has a violet ring, and there is one 'View demo' button for both.
- copywriting · model draftThe cards sort by effort, not by feature: 'Launch payments out-of-the-box' against 'Build a custom flow with UI components'.
Step 2 of 2
Stripe — Checkout preview with options- grid/layout · model draftA narrow column of toggles grouped under headers (payment setup, customer details, advanced options) beside a browser-framed live checkout page.
- motion/interaction · model draftEach toggle (promotion codes, tax, shipping address) changes the preview at once. The configurator teaches the product by showing every option's effect.
- component pattern · model draftThe preview sits in a fake browser chrome with a desktop/mobile switch and a country picker below, so it reads as the page your customer will see.
Agents get the same order from get_reference: any screen's reply names the flow and every step in it.