Payment Method Billing Block for React

The card row starts from the START constant: its last four digits, its expiry as MM/YYYY and whether it's expiring. Set those from your provider's payment method object, show the warning when the expiry falls within the next couple of billing periods, and edit the bank account and NEXT_CHARGE lines to match. The values are the only data it uses; nothing is fetched.

No. It checks that the fields have the right shape (the name has at least two characters, the number 13 to 19 digits, the expiry a MM/YY that hasn't passed, the security code 3 or 4 digits), and then keeps only the last four digits and the expiry to update the row. Before you ship, replace the number, expiry and security code fields with your payment provider's hosted fields so card numbers never reach your page or your server; the dialog, its title and its buttons stay as they are.

Saving with a bad or empty field marks each one invalid, writes the error under it, ties it to the field so a screen reader reads it with the label, and moves focus to the first one. Typing in a field clears its error. An expiry in the past says the card has expired.

It opens with focus inside, traps it while it's open, closes on Escape, the close button or Cancel, and returns focus to the "Update card" button. Its title and description name what it does and which card it replaces. On a phone it opens as a sheet from the bottom of the screen.

It moves the Default badge to that method, swaps which row offers the button, updates the sentence about the next charge, and tells screen readers in a polite status message. Call your provider to change the customer's default payment method when it's pressed.

"Add a method" is a link: point it at your own flow for a new method. Links are Buttons with render set to an a element and nativeButton={false}.