Add Card Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Add card button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same CardFields component and share the block's state, so a number typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Not in your app. Here the number is formatted and checked in memory and thrown away: after Add card only the last four digits, the network and the expiry are kept, and nothing is sent anywhere. A real checkout should never let a card number touch your own page or server. Take it with your payment provider's hosted fields, which draw the number, expiry and code in frames the provider controls, keeping card data off your page and out of your PCI scope, and show the card they return in the live card and the wallet row. Everything around the fields, the layout, the labels, the messages and the switch, stays as it is.

When you press Add card, or Enter in any field. The number must have the right length for its network (16 digits, 15 for Amex) and pass the card checksum, and a card already in the wallet is refused; the name can't be empty; the expiry must read MM/YY and not be a month before the one the block treats as now (AS_OF); the code must have 3 digits, 4 for Amex. Each problem has its own sentence in the slot under its field, and focus moves to the first field with one. Once a message shows, it follows your typing and clears as soon as that field is right. The card networks are read from the first digits (Visa 4, Mastercard 51 to 55 and 2221 to 2720, Amex 34 and 37) and written in text with a two-letter tile, never a logo.

As you type, anything that isn't a digit is dropped and the digits are grouped: fours for most cards, 4-6-5 for Amex, which also has 15 digits and a 4-digit code, and the live card and the code field change to match. The expiry gets its slash after the month. The inputs take digits on a phone's numeric keypad and ask the browser for its saved card details with the standard autocomplete values. A test number that passes the checksum, 4242 4242 4242 4242, is offered in the page text; pressing it fills the number with an expiry and a code that pass.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the card number field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Add card. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The drawn card repeats the fields, so it is hidden from screen readers; each field's hint or message is tied to it with aria-describedby, and one polite status message reports what was added. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on Add card.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Add card on top, and the fields scroll above them. Below the medium breakpoint the drawn card is left out and the fields take the full width, since they already show what you typed. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.