shadcn.io is not affiliated with official shadcn/ui
Payment Method Form Block for React
A payment form where the method decides the fields: card, bank transfer with an IBAN grouped as you type and checked for length and mod-97, or a wallet, in one grid cell so nothing moves.
Installation
Overview
Choose how to pay with this payment method form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. Three method cells on a shared hairline (Card, Bank transfer, Wallet) are real radio buttons, and the fields under them swap in one grid cell, so the panel never changes height and the hidden panes are inert. Card is a joined control built from Input Group, with the number grouped as you type, the brand from the first digits, the Luhn sum and an expiry checked against a fixed month. Bank is an account holder and an IBAN grouped in fours as you type, checked for its country's length from a typed table and for its mod-97 checksum: the block says it cannot know the account exists. Wallet is the wallet's account email and a line saying you approve it in the wallet's own window. A fee line changes with the method and so does the total on the button. Pay checks the open pane only, names what is wrong and focuses it. For rent, subscription and invoice payments in front of a provider's hosted fields.
FAQ
Can I use this to take real payments?
No. Card digits and bank numbers are checked in this tab's memory only, so the pattern is visible. A real page uses the fields your payment provider hosts and never lets those numbers reach its own code. Pay keeps only "Visa ending 4242", the last four of a bank account or a masked wallet email, wipes everything else and charges nothing.
What does the IBAN check, and what does it not?
It checks that the number starts with two letters, that the country is one of ten in a typed table and the length is right for it, and that the mod-97 checksum comes out at 1: the letters are read as 10 to 35 and the first four characters moved to the end. It cannot know that the account exists or whose it is. The test IBAN GB82 WEST 1234 5698 7654 32 passes; the "Use the test IBAN" button fills it.
How do the three panes swap without moving anything?
All four panes (card, bank, wallet and the result) sit in one grid cell, and every one that is not shown is invisible and inert, so it takes no focus and no reader finds it. The cell is as tall as the tallest, which is the bank pane. Each pane has its own fields, ids and checks, and choosing another method drops any problem shown for the last.
How does it work from the keyboard?
The method cells are one radio group: arrows move between them and change the method, so the fields follow. In the card pane a complete number moves focus to the expiry and a complete expiry to the CVC, and Backspace in an empty part goes back. The IBAN keeps the caret with its characters as it is regrouped, and Backspace over a space removes the character before it.
What stays local, and how do I connect it for real?
Nothing is charged or sent: Pay says "Not charged: this demo never takes payment." and the pane becomes the result, "Visa ending 4242", with a Pay another way button. To connect it for real, mount your provider's hosted fields in the card and bank panes, open the wallet's own window from Pay, and send the provider's token, never the digits, to your server.
Related
- Pro
Credit Card Field Form
Checkout and addressA card as one joined control: number, expiry and CVC in a single group with one focus ring, a brand from the first digits, auto-advance, errors that name the part, and only the brand and last four kept after Save.
- Pro
Address Form with ZIP Help
Checkout and addressA six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.
- Pro
Review and Submit Form
Dialogs and layoutsA review step: three sections of typed answers that each edit in place in the same boxes, a side cell of what changed, a Submit that names the section to finish, and a lock after a local submit.
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.
- €Pro
Invoice Currency Select Form
Checkout and addressA grouped currency select with symbol, code and name, an amount field, and the same amount in three other currencies from typed sample rates, set with Intl.NumberFormat.
- Pro
Brand Colour Picker Form
Numbers and pickersA brand colour field that makes a scale: a hex input and the colour picker kept in sync, eight named presets, and five derived steps by lightness, each with its hex and a copy button.