Payment Failed Error Block for React

Nothing is paid and nothing leaves the page. The button checks the field that is open (the expiry or the card number), shows a spinner for under a second and then a polite status line says that nothing was charged and what a real page would hand over: the card details, the transfer or the wallet payment. Focus moves to that line because the busy button drops it. To wire it for real, start the payment from pay with your provider's hosted fields or payment element, and keep the order and the hold time on your server.

Not in your own app: use your payment provider's hosted fields, so the number never reaches your page or your servers. In this demo the field exists to show the checks. What you type is spaced into groups, its brand is read from the first digits, its length is counted and it is run through the Luhn check, all in the page's own state; nothing is stored, logged or sent, it is dropped as soon as the button has used it, and only the brand and the last four digits are kept ("Visa ending 4242").

The fix line and, for two of them, a field. Not enough money and The bank said no only say what to do (try again later, or call the number on the card). Expired card asks for the new expiry, which must be a real month that has not passed against a fixed "today". Details wrong asks for the card number again. All four fixes share one cell of the panel, so choosing a reason never changes the page's height, and a message under a field says what is wrong without moving anything.

The order lines are typed in whole cents in LINES, the total is summed from them and every amount is formatted with Intl.NumberFormat, so the text can't disagree with itself and nothing is rounded twice. "Held until 14:30 UTC" is typed clock text: in your app it comes from the order on your server, and a visitor's own clock plays no part.

The reasons are one single-choice toggle group: Tab reaches it and the arrow keys move between reasons, and one is always chosen. The methods are native radio buttons in a labelled group, so the arrow keys move between them too, and the chosen cell is a solid tint with a heavy edge and a filled dot, never colour alone.

The reasons go two across and the three methods stack. The button is pinned to the foot of the screen so it stays in reach while you read, and its status line is read aloud there and shown on larger screens.