Payment Method 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 Change payment method 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 MethodFields component and share the block's state. 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. This dialog never takes a card number, and the code is read in memory and dropped when the dialog closes: it is not kept in state after Use. A real checkout should never let a card number or a security code touch your own page or server. Take both with your payment provider's hosted fields, which draw them in frames the provider controls and keep card data out of your page and out of your PCI scope, and show the saved card the provider returns in the row. The rows, the choice, the default box and the details for the other two methods stay as they are.

The detail for the chosen method only; the other two stay in the same cell, invisible and inert, so the dialog keeps its height whichever you choose. The card needs exactly three digits (anything else is dropped as you type, and an empty or short code is refused with its own sentence and focus on the field). The bank transfer needs nothing from the person: it shows the reference and what to send. The invoice needs a purchase-order number of 3 to 20 letters, digits or dashes. Once a message shows, it follows your typing and clears when the field is right.

Everything. Nothing is charged: Use only changes the Pay with row and its note behind the dialog and says, in the polite status, what was chosen and that nothing was charged. The saved card, the bank reference and the totals are typed in the file. In your app send the method to your payments API, show its result in the same place, and take the reference from the response. Copy uses the real clipboard and says whether it worked.

Yes. The three methods are one native radio group, so the arrow keys move between them and the checked row is the one Tab reaches; the dialog is named by its title and described by its sentence, focus starts on the chosen method and stays inside until it closes, and Escape, Cancel and the close button return focus to Change payment method. Each field's hint or message is tied to it with aria-describedby. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned, the rows and the detail scrolling above them. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.