HomeDocsComponentsBlocksForm contractValidation
Blocks / Checkout

Checkout

Card, receipt phone and a tip, validated by the shipped schemas.

Open in Claude Code

Visa, Mastercard and Amex. Grouping reflows per brand.

This is a live form, not a screenshot — fill it in and submit it. The code tab is the exact file that is running, read from disk at build time, so the two cannot drift.

What it is doing

The form everyone builds and most get wrong in the same two ways: the card number is stored with its spaces, and the tip is a float. Neither is possible here. Note the stepper layout on the tip field — money fields in a checkout are usually adjusted, not typed.

What it submits

FIELDVALUE
card"4242424242424242" — digits only, no spaces
phone"+442071234567" — E.164, whatever the user typed
tip250 — integer minor units, so £2.50

Components used