No Payment Methods Empty State Block for React

Shown open in place for the preview: on load the dialog is drawn in place, a native non-modal dialog over a drawing of the page, so nothing is trapped or focused. Add payment method opens the real Dialog, with its focus trap, Escape and focus return to the button, and the in-place copy stays closed until a reload. Both share the same fields and state, so a type or a nickname chosen in place is there in the real one. In your app keep the Dialog and drop the in-place copy, the scrim and the Escape listener on the stage.

Nowhere here, on purpose. The dialog has no number, expiry or security-code field, and it says so: numbers are entered in your payment provider's hosted fields, never in your own page. To make it real, open the provider's hosted fields (or its own form) from the button after the type step, and list the method it confirms. The services named beside each type are real names in text with a two-letter tile, never logos.

The list is state in the page: nothing is saved, charged or sent, and the words say "listed here only" and "Nothing was saved or charged." The demo lists three methods; a fourth is refused with a line that says so, and Start over, next to the button, empties the list and puts the first type back. To wire it for real, save the type and the nickname with your API where the code says so, and list what it returns.

The three objects are stacked in one grid cell of one size, and the chosen one is visible while the other two are hidden, so the dialog is the same height for every type. The nickname is real text laid over the dashed box of the object, so it follows your font; the drawings are decorative and hidden from assistive technology, and the radio buttons and the button's label say what was chosen.

The type cards are one radio group, so the arrow keys move between them and the choice is spoken; Tab goes on to the nickname and the footer buttons. Enter in the nickname adds the method. Escape and Cancel close the dialog and return focus to Add payment method, and a missing nickname is refused in a line under the field with focus moved to it. One polite status message says each change, inside the dialog while it is up and on the page once it is closed.

The in-place dialog docks to the foot of the stage with its footer pinned, so Add a card is always on screen while the body scrolls; the real dialog keeps the catalog's phone layout from the bottom of the screen. The two lines of services under the type cards have room reserved for two lines, so choosing a type never shifts the nickname.