Codelab de prácticas recomendadas para los formularios de pago

Sam Dutton

Para seguir este codelab, abre esta falla en una segunda pestaña.

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

Precaución: En este artículo, se describen las prácticas recomendadas para el frontend para los formularios de pago. No explica cómo implementar transacciones en tu sitio. Si quieres obtener más información para agregar la función de pago a tu sitio web, consulta Pagos web.

Paso 1: Usa el código HTML según lo previsto

Use elementos creados para el trabajo:

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

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

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

Echa un vistazo al archivo 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 correspondientes al número de la tarjeta, el nombre que figura 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.

Nota: Los elementos <input> no tienen etiquetas de cierre. Esto se debe a que son elementos void (vacíos): no tienen contenido en sí mismos. El carácter "/" al final de un elemento vacío es opcional. <input> o <input /> son correctos.

Haz clic en Ver aplicación para obtener una vista previa de tu formulario 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 regresar 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 de navegador predeterminado dificulta el uso del formulario, especialmente en dispositivos móviles. Tampoco se ve muy bien.

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

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

¡Eso es mucho CSS! Los aspectos principales 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 los diferentes tamaños de viewport.

Cuando tengas todo listo, haz clic en Ver aplicación para visualizar el formulario con estilo. También notarás que se ajustaron los bordes y que display: block; se usa para las etiquetas, de modo que se establezcan en una línea por sí solas, y las entradas pueden ser de ancho completo. En las 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 cuándo una entrada tiene un valor no válido. (lo usarás más adelante en el codelab).

El CSS prioriza los dispositivos móviles:

• El CSS predeterminado es para viewports con un ancho inferior a 400px.
• Las consultas de medios se usan para anular el valor predeterminado de las viewports que tienen al menos 400px de ancho y, luego, nuevamente para los viewports 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.

Cuando creas contenido para la Web, debes realizar pruebas en diferentes dispositivos y tamaños de viewport. Eso es particularmente cierto para los formularios, ya que un pequeño error puede volverlos inutilizables. Siempre debes ajustar los puntos de interrupción de CSS para asegurarte de que funcionen bien con el contenido y los 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 Device Mode en las Herramientas para desarrolladores de Chrome?
• ¿Necesitas ajustar los puntos de interrupción?

Existen varias formas de probar un formulario en diferentes dispositivos:

• Usa Device Mode de las Herramientas para desarrolladores de Chrome para simular dispositivos móviles.
• Envía la URL de tu computadora a tu teléfono.
• Usa un servicio como BrowserStack para realizar pruebas en una variedad de dispositivos y navegadores.

Paso 3: Agrega atributos para ayudar a los usuarios a ingresar datos

Habilita el navegador para almacenar y autocompletar valores de entrada, y proporcionar acceso a funciones de validación y pago integradas y seguras.

Agrega atributos al formulario en el 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 visualizar tu app y presiona o haz clic en el campo Número de tarjeta. Según el dispositivo y la plataforma, es posible que veas un selector con las formas de pago almacenadas para el navegador, como la que se muestra a continuación.

Selector de pagos y autocompletado integrados en el navegador.

Una vez que selecciones una forma de pago y, luego, ingreses el código de seguridad, el navegador completará el formulario con los valores 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.

Nota: No te alarmes. Es posible que tu navegador pueda autocompletar el formulario con los datos almacenados de la tarjeta de pago, pero no se podrá realizar ningún pago ni se transferirán ni guardarán datos.

En un dispositivo móvil, también notarás que se muestra un teclado numérico cuando presionas el campo Número de tarjeta. Eso se debe a que usaste inputmode="numeric". En el caso de los campos numéricos, esto facilita el ingreso de números y de caracteres no numéricos, y sugiere a los usuarios que recuerden el tipo de datos que ingresan.

Es muy importante agregar correctamente todos los valores de autocomplete disponibles a los formularios de pago. Es común que los sitios pierdan el valor de autocomplete de la fecha de vencimiento de la tarjeta y otros campos. Si falta un solo valor de autofill o es incorrecto, los usuarios deberán recuperar su tarjeta real para ingresar los datos manualmente y podrías perder una oferta. Si la función de autocompletar en formularios de pago no funciona correctamente, es posible que los usuarios también decidan mantener un registro de los detalles de la tarjeta de pago en su teléfono o computadora, lo cual es altamente inseguro.

Nota: Las investigaciones demuestran que puede ser mejor usar elementos de selección separados para el mes y el año en lugar de una sola entrada. La que creas que es la mejor depende de ti. Para probarlo, mezcla y edita el código HTML de nuestra demostración completa del formulario de pago, que incluye código para ambos tipos de campo de fecha de vencimiento.

Intenta enviar el formulario de pago con un campo vacío. El navegador solicita que se completen los datos faltantes. Ahora, agrega una letra al valor en el campo Número de tarjeta y envía 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 debería verse así:

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

Paso 4: Inhabilita el botón de pago una vez que hayas enviado 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 realiza un pago. Muchos usuarios presionan o hacen clic en los botones de forma repetida, incluso si funcionan bien. Esto puede causar problemas con el procesamiento de pagos y aumentar 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);
  }
}

Envía el formulario de pago y ve qué sucede.

Precaución: Algunos sitios dejan inhabilitados los botones de envío del formulario hasta que el usuario complete correctamente todos los campos del formulario. Es mejor no hacerlo, ya que los usuarios podrían omitir accidentalmente un valor requerido o usar uno no válido. Luego, presionen el botón de envío inhabilitado o hagan clic en él y supondrán que tu sitio no funciona. Incluso si marcas valores de formulario como no válidos o faltantes, es posible que el usuario no vea las advertencias (especialmente en los formularios más largos y en los dispositivos móviles). Es mejor validar de forma intercalada cuando el usuario ingresa datos y cuando intenta enviar el formulario.

Así se verá tu código en este punto, con la adición de algunos comentarios y una función validate():

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

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

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

• Prueba el formulario en diferentes dispositivos. ¿Para qué dispositivos y navegadores orientas tu contenido? ¿Cómo se podría mejorar el formulario?

Un paso más allá

Considera las siguientes funciones fundamentales de formulario que no se tratan en este codelab:

• Vínculo a los documentos de las Condiciones del Servicio y la política de privacidad: deja en claro a los usuarios cómo protege sus datos.

• Estilo y desarrollo de la marca: Asegúrese de que combinen con el resto de su sitio. A la hora de ingresar nombres y direcciones, y realizar pagos, los usuarios deben sentirse cómodos y confiar en que aún están en el lugar correcto.

• Analytics y supervisión de usuarios reales: Permite que los usuarios reales prueben y supervisen el rendimiento y la usabilidad del diseño de tu formulario.