Codelab de prácticas recomendadas para los formularios de pago

Sam Dutton

En este codelab, se muestra cómo crear un formulario de pago que sea seguro, accesible y fácil de usar.

Paso 1: Usa HTML según lo previsto

Usa elementos creados para el trabajo:

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

Como verás, estos elementos habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y le agregan significado a tu lenguaje de marcado.

  • Haz clic en Remix para editar para que el proyecto sea editable.

Consulta 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 están unidos en elementos <section> y cada uno tiene una etiqueta. El botón Completar pago es un <button> HTML. Más adelante en este codelab, aprenderás sobre las funciones del navegador a las que puedes acceder con estos elementos.

Haz clic en Ver app para obtener una vista previa del formulario de pago.

  • ¿El formulario funciona bien como está?
  • ¿Hay algo que cambiarías para que funcione mejor?
  • ¿Qué sucede en los dispositivos móviles?

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

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

El código HTML que agregaste es válido, pero el diseño predeterminado del navegador hace que el formulario sea difícil de usar, en especial en dispositivos móviles. Tampoco se ve muy bien.

Debes asegurarte de que tus formularios funcionen bien en una variedad de dispositivos ajustando el padding, los márgenes y los tamaños de fuente.

Copia todo el CSS que aparece a continuación y pégalo en tu propio archivo css/main.css.

¡Eso es mucho CSS! Los principales aspectos que debes tener en cuenta son los cambios en los tamaños:

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

Cuando esté todo listo, haz clic en Ver app para ver el formulario con diseño aplicado. También notarás que se ajustaron los bordes y que se usa display: block; para las etiquetas, de modo que se colocan en una línea por sí solas, y las entradas pueden tener el ancho completo. En Prácticas recomendadas para formularios de acceso, se explican los beneficios de este enfoque con más detalle.

El selector :invalid se usa para indicar cuándo una entrada tiene un valor no válido. (la usarás más adelante en el codelab).

El CSS prioriza los dispositivos móviles:

  • El CSS predeterminado es para viewports de menos de 400px de ancho.
  • Las solicitudes de medios se usan para anular la configuración predeterminada de las ventanas de visualización que tienen un ancho de al menos 400px y, luego, para las ventanas de visualización que tienen un ancho de al menos 500px. Esto debería funcionar bien en teléfonos más pequeños, dispositivos móviles con pantallas más grandes y computadoras de escritorio.

Cada vez que compilas para la Web, debes realizar pruebas en diferentes dispositivos y tamaños de viewport. Esto es así, en especial, para los formularios, ya que un pequeño error puede hacerlos inutilizables. Siempre debes ajustar los puntos de inflexión de CSS para asegurarte de que funcionen bien con tu contenido y tus dispositivos de destino.

  • ¿Se puede ver todo el formulario?
  • ¿Las entradas del formulario son lo suficientemente grandes?
  • ¿Todo el texto es legible?
  • ¿Notaste alguna diferencia entre usar un dispositivo móvil real y ver el formulario en el modo de dispositivo de las 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 para ayudar a los usuarios a ingresar datos

Habilita el navegador para que almacene y autocompleta los valores de entrada, y proporciona acceso a funciones de pago y validación integradas y seguras.

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 la plataforma, es posible que veas un selector que muestre las formas de pago almacenadas para el navegador, como el 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 y el otro muestra los valores autocompletados de los marcadores de posición.
El selector de pagos y el autocompletado integrados en el navegador.

Una vez que selecciones una forma de pago y, luego, ingreses el código de seguridad, el navegador autocompletará 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 que aparece un teclado numérico en cuanto presionas el campo Número de tarjeta. Eso es porque usaste inputmode="numeric". En el caso de los campos numéricos, esto facilita la entrada de números y hace imposible ingresar caracteres no numéricos, y les recuerda a los usuarios el tipo de datos que están ingresando.

Es muy importante agregar correctamente todos los valores de autocomplete disponibles a los formularios de pago. Es bastante común que los sitios omitan el valor autocomplete para la fecha de vencimiento de la tarjeta y otros campos. Si falta un valor de autofill o es incorrecto, los usuarios deberán recuperar su tarjeta real para ingresar los datos de la tarjeta de forma manual, y es posible que pierdas una venta. Si la función 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 que es muy inseguro.

Intenta enviar el formulario de pago con un campo vacío. El navegador te solicita que completes los datos faltantes. Ahora, agrega una letra al valor del campo Número de tarjeta y prueba 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 otras restricciones de validación. No se requiere JavaScript.

Tu formulario de pago ahora debería verse así:

  • Intenta quitar los valores de autocomplete y completar el formulario de pago. ¿Qué dificultades tienes?
  • Prueba las formas de pago en las tiendas en línea. Considera lo que funciona bien y lo que sale mal. ¿Hay problemas habituales o prácticas recomendadas que debas seguir?

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

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

Agrega el siguiente código 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 ve qué sucede.

A continuación, se muestra cómo debería verse tu código en este punto, con la adición de algunos comentarios y una función validate():

  • Notarás que el código JavaScript incluye código comentado para la validación de datos. Este código usa la API de Constraint Validation (que es compatible con muchos navegadores) para agregar validación personalizada y acceder a la IU del navegador integrada para establecer el enfoque y mostrar instrucciones. Quita el comentario del código y pruébalo. Deberás establecer valores adecuados para someregex y message, y un valor para someField.

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

Tu formulario de pago completo debería verse de la siguiente manera:

Más información

Ten en cuenta las siguientes funciones cruciales de los formularios que no se abordan en este codelab:

  • Vínculo a tus documentos de las Condiciones del Servicio y la Política de Privacidad: Deja claro a los usuarios cómo resguardas sus datos.

  • Estilo y desarrollo de la marca: Asegúrate de que coincidan con el resto del sitio. Cuando ingresan nombres y direcciones y realizan pagos, los usuarios deben sentirse cómodos y confiar en que se encuentran en el lugar correcto.

  • Analytics y supervisión de usuarios reales: Permite que se pruebe y supervise el rendimiento y la usabilidad del diseño de tu formulario para usuarios reales.