Codelab de prácticas recomendadas para los formularios de pago

Sam Dutton

En este codelab, aprenderás a crear un formulario de pago que sea seguro, accesible y fácil de usar.

Paso 1: Usa HTML según lo previsto

Usa elementos diseñados para el trabajo:

  • <form>
  • <section>
  • <label>
  • <input>, <select>, <textarea>
  • <button>

Como verás, estos elementos habilitan funciones integradas en el navegador, mejoran la accesibilidad y y agregar significado a tu lenguaje de marcado.

  • Haz clic en Remix para editar para que el proyecto se pueda editar.

Observa el código HTML de tu formulario en index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Hay <input> elementos para el número de tarjeta, el nombre en la tarjeta, la fecha de vencimiento y el código de seguridad. Todos son se unen a elementos <section> y cada uno tiene una etiqueta. El botón Completar pago es un código HTML. <button> Más adelante en este codelab, aprenderás sobre las funciones del navegador a las que puedes acceder usando estos elementos.

Haz clic en Ver aplicación para obtener una vista previa de tu forma de pago.

  • ¿El formulario funciona lo suficientemente bien como está?
  • ¿Hay algo que cambiarías para que funcione mejor?
  • ¿Y en dispositivos móviles?

Haz clic en Ver fuente para volver a tu código fuente.

Paso 2: Diseña para dispositivos móviles y computadoras de escritorio

El código HTML que agregaste es válido, pero el estilo predeterminado del navegador dificulta el uso del formulario, especialmente en dispositivos móviles. Tampoco se ve demasiado bien.

Para asegurarte de que tus formularios funcionen bien en una variedad de dispositivos, debes ajustar el relleno, los márgenes y tamaños de fuente.

Copia todos los CSS que aparecen a continuación y pégalos en tu archivo css/main.css.

¡Eso es mucho CSS! Lo principal que debes tener en cuenta son los cambios en los tamaños:

  • padding y margin se agregaron a las entradas.
  • font-size y otros valores son diferentes para diferentes tamaños de viewport.

Cuando esté todo listo, haz clic en Ver aplicación para ver el formulario con estilo. También notarás que las fronteras se ajustó y display: block; se usa para las etiquetas, de modo que queden en una línea por su cuenta. las entradas pueden ser de ancho completo. Prácticas recomendadas para el formulario de acceso se explican los beneficios de este enfoque con más detalle.

El selector :invalid se usa para indicar cuando una entrada tiene un valor no válido. (Se usa este más adelante en el codelab).

El CSS prioriza los dispositivos móviles:

  • La CSS predeterminada es para viewports con un ancho de menos de 400px.
  • Las consultas de medios son se utiliza para anular el valor predeterminado para viewports que tengan al menos 400px de ancho, y luego, nuevamente para ventanas gráficas que tengan al menos 500px de ancho. Esto debería funcionar bien en teléfonos más pequeños, dispositivos móviles en pantallas más grandes y en computadoras de escritorio.

Cuando creas contenido para la Web, debes realizar pruebas en diferentes dispositivos y tamaños de viewport. Eso especialmente en el caso de los formularios, porque una pequeña falla puede volverlos inutilizables. Siempre debes ajustar Interrupciones de CSS para garantizar que funcionen bien con tu y los dispositivos de destino.

  • ¿Se puede ver todo el formulario?
  • ¿Las entradas del formulario son lo suficientemente grandes?
  • ¿Es legible todo el texto?
  • ¿Notaste alguna diferencia entre usar un dispositivo móvil real y ver el formulario en ¿Modo de dispositivo en Herramientas para desarrolladores de Chrome?
  • ¿Tuviste que ajustar los puntos de interrupción?

Existen varias formas de probar el formulario en diferentes dispositivos:

Paso 3: Agrega atributos que ayuden a los usuarios a ingresar datos

Habilita el navegador para almacenar y autocompletar valores de entrada, y proporciona acceso a las funciones de pago y validación.

Agrega atributos al formulario en tu archivo index.html para que se vea de la siguiente manera:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Vuelve a ver la app y, luego, presiona o haz clic en el campo Número de tarjeta. Según el dispositivo y es posible que veas un selector que muestre las formas de pago almacenadas para el navegador, como la que se muestra a continuación.

Dos capturas de pantalla de un formulario de pago en Chrome en un teléfono Android. Uno muestra el selector de tarjetas de pago integrado en el navegador; el otro muestra valores de marcador de posición completados automáticamente.
Selector de pagos y autocompletar integrados en el navegador.

Una vez que selecciones una forma de pago e ingreses el código de seguridad, el navegador completará el formulario con los valores de autocomplete de la tarjeta de pago que agregaste al formulario:

  • cc-number
  • cc-name
  • cc-exp
  • cc-csc

Muchos navegadores también verifican y confirman la validez de los números de tarjetas de crédito y los códigos de seguridad.

En un dispositivo móvil, también verás un teclado numérico apenas tocas Número de tarjeta. Esto se debe a que usaste inputmode="numeric". En el caso de los campos numéricos, facilita el ingreso de números y la imposibilidad de ingresar caracteres no numéricos, y sugiere a los usuarios recordar el tipo de datos que ingresan.

Es muy importante agregar correctamente todos los valores de autocomplete disponibles a los formularios de pago. Es es bastante común que los sitios pierdan el valor de autocomplete en la fecha de vencimiento de la tarjeta y otras . Si falta un valor de autofill o es incorrecto, los usuarios deberán recuperar su para ingresar manualmente los datos correspondientes y podrías perder una venta. Si usas Autocompletar en los formularios de pago no funciona correctamente, los usuarios también pueden decidir mantener un registro de los detalles de la tarjeta de pago en su teléfono o computadora, lo cual es muy inseguro.

Intenta enviar el formulario de pago con un campo vacío. El navegador solicita que se complete la falta de datos no estructurados. Ahora, agrega una letra al valor en el campo Número de tarjeta y, luego, intenta enviar el formulario. El navegador advierte que el valor no es válido. Esto sucede porque usaste el atributo pattern para especificar valores válidos para un campo. Lo mismo funciona para maxlength y otros restricciones de validación No se requiere JavaScript.

El formulario de pago debería tener el siguiente aspecto:

  • Intenta quitar autocomplete valores y completar el formulario de pago. ¿Qué dificultades tienes encontrar?
  • Prueba los formularios de pago en las tiendas en línea. Considera lo que funciona bien y lo que sale mal. ¿Hay algún problema común o práctica recomendada que deberías seguir?

Paso 4: Inhabilita el botón de pago una vez que envíes el formulario

Considera inhabilitar un botón de envío una vez que el usuario lo presione o haga clic en él, especialmente cuando el usuario realiza el pago. Muchos usuarios presionan o hacen clic en botones reiteradamente, incluso si funcionan bien. Esto puede causar problemas con el procesamiento de pagos y agregar a la carga del servidor.

Agrega el siguiente JavaScript a tu archivo js/main.js:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Intenta enviar el formulario de pago y revisa qué sucede.

Así es como debería verse tu código en este punto, con la adición de algunos comentarios y una Función validate():

  • Notarás que JavaScript incluye código con comentarios para la validación de datos. Este código usa la API de Constraint Validation (que es ampliamente compatible) para agregar y el acceso a la IU integrada del navegador para enfocar y mostrar mensajes. Quita el comentario del código y y pruébalo. Deberás establecer los valores adecuados para someregex y message, y establecer un valor para someField

  • Qué datos de analítica y supervisión de usuarios reales ¿supervisarías para identificar formas de mejorar tus formularios?

Ahora, el formulario de pago completo debería verse de la siguiente manera:

Un paso más allá

Ten en cuenta las siguientes funciones fundamentales que no se tratan en este codelab:

  • Vínculo a los documentos de las Condiciones del Servicio y la política de privacidad (aclara a los usuarios cómo para proteger sus datos.

  • Estilo y desarrollo de la marca: Asegúrate de que coincidan con el resto de tu sitio. Al ingresar nombres y direcciones y realizar pagos, los usuarios deben sentirse cómodos y confiar en que siguen en el lugar correcto.

  • Análisis y supervisión de usuarios reales: permiten probar y supervisar el rendimiento y la usabilidad del diseño de su formulario para usuarios reales.