Card Payment Form

The card form is the last thing between a shopper and a sale, and every error message it shows costs conversions. It should catch obvious typos before anything is sent, explain exactly what is wrong and where, and never let a double click pay twice.

Build the card payment form for a $49.00 order.

Requirements

• Three fields labelled Card number, Expiry (MM/YY) and CVC, and a submit button Pay $49.00.
• Formatting while typing:
  • the card number keeps only digits (at most 19) and shows them in groups of four separated by spaces: 4242 4242 4242 4242;
  • the expiry keeps up to four digits and inserts a slash after the month: typing 1228 shows 12/28;
  • the CVC keeps only digits, at most four.
• Validation on submit. Nothing is sent while any of these fail:
  • the card number must have at least 13 digits and pass the Luhn checksum, otherwise Enter a valid card number.;
  • the expiry must be MM/YY with a month from 01 to 12, otherwise Enter a valid expiry date.;
  • the CVC must have 3 digits, or 4 for American Express (numbers starting with 34 or 37), otherwise Enter a valid security code.
• Each error is shown under its field; the field gets aria-invalid="true" and an aria-describedby pointing at the error's id. After a failed submit, focus moves to the first invalid field.
• A valid submit sends POST /api/payments with the JSON body { "cardNumber": "<digits only>", "expMonth": <number>, "expYear": <number>, "cvc": "<digits>" }. While it is in flight the button reads Processing... and is disabled.
• On success show Payment successful. On failure the server answers with { "error": "<reason>" }: show that reason in an alert and enable the button again.