Credit Card Field Form Block for React

No, and the code says so. It checks a card in the tab's memory (brand by the first digits, the Luhn sum, the expiry against a fixed month) so you can see the pattern. A real page never lets card digits reach its own code: it uses the fields your payment provider hosts, an iframe of theirs, and this layout, labels and error wording around them. Nothing here is sent, stored or charged.

The test number 4242 4242 4242 4242 with any future expiry (the check is against October 2026) and any three digits; the "Use the test card" button fills it. A number that fails the Luhn sum, an expiry in the past, a month above 12 or a CVC of the wrong length each says so under the group and marks that part aria-invalid.

When the number reaches its brand's length and passes the Luhn sum, focus moves to the expiry; when the expiry has four digits and is valid, to the CVC. Only typing at the end advances, so editing the middle never jumps. Backspace in an empty expiry or CVC goes back to the part before with the caret at its end, and the caret stays with its digits while the number is regrouped. Paste works too: spaces and slashes are ignored.

Only the brand and the last four digits: "Visa ending 4242". The number, expiry, CVC, name and postal code are cleared from state, and the form is replaced in place by the saved card with a Replace card button, so the panel never changes height. Replace card returns an empty form.

Everything: Save says "Saved in this demo. Nothing was sent or charged." To connect it for real, mount your provider's hosted number, expiry and CVC fields in the group's place, keep the name and postal code fields, and send the provider's token, never digits, to your server.

Keep card digits out of the form library entirely: the hosted fields own them. With react-hook-form, register only the name and the postal code, and pass the provider's result to your submit handler.