Campo de tarjeta

Los datos de la tarjeta en un bloque: número, caducidad y código de seguridad, y el titular si se pide. Es un fieldset con su leyenda, porque los tres campos son un solo dato.

Cuándo usarlo

• El pago con tarjeta dentro de la propia página. Lo que sale por onChange va limpio: el número, solo cifras (EMPTY_CARD para empezar en blanco).
• listCard(value, today) dice si está entera y sin fallos, para habilitar el botón de pagar; errors pinta lo que responda la pasarela, que manda sobre lo de aquí.
• withHolder cuando la pasarela pide el nombre impreso. alert es la nota de debajo (con "" no sale).

Cuándo no

• Enseñar una tarjeta ya guardada: no se vuelve a pedir; maskCard(number) la escribe como «•••• 4242».
• Una cuenta bancaria: IbanField.

Teclado: Tab recorre titular, número, caducidad y código. El número se agrupa mientras se escribe (en American Express, 4-6-5, como viene impresa) y la barra de la caducidad se pone sola: 1228 se escribe 12/28. Cada campo se comprueba al salir de él, no en cada tecla.

Accesibilidad: la marca se dice con palabras («Visa», «American Express»), no con un logotipo que no se lee en voz alta. El código pide tres o cuatro cifras según la marca, y la ayuda dice dónde está impreso. Llevan los autocomplete que espera el navegador (cc-name, cc-number, cc-exp, cc-csc): sin ellos el autorrelleno no ofrece la tarjeta guardada. La caducidad vale hasta el último día de su mes.

Aspecto fino: sin variables propias: los campos usan --amset-field-* y el bloque se ajusta con las clases amset-payment-card__title, amset-payment-card__row, amset-payment-card__brand y amset-payment-card__alert.