Los formularios de pago son la parte más importante del proceso de confirmación de la compra. Un diseño deficiente del formulario de pago es una causa común de abandono del carrito de compras.
Crea un formulario que facilite al máximo que los usuarios ingresen los detalles de pago en computadoras de escritorio y dispositivos móviles. Asegúrate de que el formulario aproveche al máximo las funciones integradas del navegador para el autocompletado, la validación y las restricciones de entrada de datos.
Cómo implementarlo
A continuación, se describen los lineamientos más importantes para crear formularios de pago exitosos.
Usa código HTML significativo y válido
Aprovecha al máximo los elementos y atributos creados para crear formularios:
<form>,<input>,<label>y<button>type,autocompleteyinputmode
Estas habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado al lenguaje de marcado.
Usa el elemento <label> para etiquetar los campos de formulario para el ingreso de datos
Para etiquetar un <input>, <select> o <textarea>, usa un <label>. Asocia una etiqueta con una entrada asignándole al atributo for de la etiqueta el mismo valor que el atributo id de la entrada.
Aprovecha al máximo los atributos HTML
Facilita el ingreso de datos para los usuarios con el atributo <type> del elemento <input> adecuado para proporcionar el teclado correcto en dispositivos móviles y habilitar la validación integrada básica del navegador.
Usa siempre type="email" para las direcciones de correo electrónico y type="tel" para los números de teléfono.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Cada elemento <input>, <select> y <textarea> DEBERÍA tener un atributo autocomplete apropiado para mejorar la accesibilidad y ayudar a los usuarios a evitar volver a ingresar datos.
Crea botones útiles
Usa <button> para los botones. También puedes usar <input type="submit">, pero no uses un div ni algún otro elemento aleatorio que actúe como botón. Los elementos de botón proporcionan un comportamiento accesible, una funcionalidad integrada para enviar formularios y se les puede aplicar diseño fácilmente.
Asigna a cada botón de envío de formulario un valor que indique lo que hace. Para cada paso hacia la confirmación de la compra, usa un llamado a la acción descriptivo que muestre el progreso y haga que el siguiente paso sea obvio. Por ejemplo, etiqueta el botón de envío en tu formulario de dirección de entrega como Proceder al pago en lugar de Continuar o Guardar.
Usa una sola entrada de nombre siempre que sea posible
Permite que los usuarios ingresen su nombre en un solo campo, a menos que tengas un buen motivo para almacenar por separado los nombres de pila, los apellidos, los títulos honoríficos o cualquier otra parte del nombre. Usar un solo campo de entrada para el nombre hace que los formularios sean menos complejos, permite cortar y pegar, y simplifica la función Autocompletar.
Permitir nombres internacionales. Para la validación, evita usar expresiones regulares que solo coincidan con caracteres latinos. La opción Solo caracteres latinos excluye a los usuarios con nombres o direcciones que incluyen caracteres que no están en el alfabeto latino. En su lugar, permite la coincidencia de letras Unicode y asegúrate de que tu backend admita Unicode de forma segura como entrada y salida. Los navegadores modernos admiten Unicode en expresiones regulares.
Permite una variedad de formatos de dirección
Cuando agregues campos de formulario para una dirección en un formulario de pago, ten en cuenta la variedad de formatos de dirección, incluso dentro de un mismo país. No hagas suposiciones sobre las direcciones "normales".
Si es posible dentro de tus requisitos de datos, considera usar un solo elemento <textarea> para la dirección. Esta es la opción más flexible para una variedad de formatos de direcciones locales e internacionales.
Usa la función de autocompletar para la dirección de facturación
De forma predeterminada, establece la dirección de facturación para que sea la misma que la de entrega. Reduce el desorden visual proporcionando un vínculo para editar la dirección de facturación (o usa elementos de resumen y detalles) en lugar de mostrar la dirección de facturación en un formulario.
Usa valores de autocompletado adecuados para la dirección de facturación, tal como lo haces con la dirección de envío, de modo que el usuario no tenga que ingresar datos más de una vez. Agrega una palabra de prefijo a los atributos de autocompletado si tienes valores diferentes para las entradas con el mismo nombre en secciones distintas. Por ejemplo:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
Muestra el progreso de la confirmación de la compra
Para cada paso hacia el pago, usa encabezados de página y valores de botones descriptivos que dejen en claro lo que se debe hacer ahora y cuál es el siguiente paso de la confirmación de la compra.
Usa el atributo enterkeyhint en las entradas de formulario para establecer la etiqueta de la tecla Intro del teclado para dispositivos móviles. Por ejemplo, usa enterkeyhint="previous" y enterkeyhint="next" en un formulario de varias páginas, enterkeyhint="done" para la entrada final del formulario y enterkeyhint="search" para una entrada de búsqueda.
Ayuda a los usuarios a evitar volver a ingresar los datos de pago
Asegúrate de agregar los valores de autocomplete adecuados en los formularios de tarjetas de pago. Sin la función Autocompletar, es posible que los usuarios mantengan un registro físico de los detalles de la tarjeta de pago o los almacenen de forma no segura.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
Mostrar sugerencias de formato sobre la entrada
Cuando un campo tenga un formato obligatorio (por ejemplo, la fecha de vencimiento de MM/YY), coloca la sugerencia en un elemento visible arriba de la entrada y vincula ambos con aria-describedby, como en el ejemplo de cc-exp anterior. El teclado del dispositivo móvil o la ventana emergente de autocompletar pueden ocultar fácilmente las sugerencias que se encuentran debajo de un campo de entrada en el momento en que el usuario las necesita.
No confíes en el atributo placeholder como la única sugerencia de formato y nunca lo uses en lugar de un <label>: el texto de marcador de posición se oculta en cuanto el usuario comienza a escribir, por lo que no se puede verificar durante la edición. Un marcador de posición es adecuado como indicador adicional junto con la etiqueta y la sugerencia persistente.
No enmascares el código de seguridad
Usa type="text" con inputmode="numeric" para el código de seguridad de la tarjeta, no type="password". Los usuarios no pueden verificar si hay errores tipográficos en un código enmascarado de tres o cuatro dígitos, por lo que no se detecta un dígito mal escrito hasta que se rechaza el pago, y el enmascaramiento agrega poca protección porque el código está impreso en la tarjeta que tiene el usuario.
Usa una sola entrada para los números de teléfono y de tarjetas de pago
Para los números de tarjetas de pago y de teléfono, usa un solo campo de entrada: no dividas el número en partes. Esto facilita que los usuarios ingresen datos, simplifica la validación y permite que los navegadores completen automáticamente los campos. Considera hacer lo mismo con otros datos numéricos, como el PIN y los códigos de entidad bancaria.
Valida con cuidado
Debes validar la entrada de datos en tiempo real y antes de enviar el formulario. Una forma de hacerlo es agregar un atributo pattern a una entrada de tarjeta de pago. Si el usuario intenta enviar el formulario de pago con un valor no válido, el navegador muestra un mensaje de advertencia y se enfoca en la entrada.
Sin embargo, la expresión regular de tu patrón debe ser lo suficientemente flexible como para admitir el rango de longitudes de los números de tarjetas de pago: de 14 dígitos (o posiblemente menos) a 20 (o más). Los códigos de seguridad de las tarjetas (también conocidos como CSC, CVC, CVV, entre otros nombres) constan de 3 o 4 dígitos.
Permite que los usuarios incluyan espacios cuando ingresen un número de tarjeta de pago nuevo, ya que así se muestran los números en las tarjetas físicas. Esto es más amigable para el usuario (no tendrás que decirle que "hizo algo mal"), es menos probable que interrumpa el flujo de conversión y es sencillo quitar los espacios en los números antes de procesarlos.
Ayuda a evitar que los usuarios omitan campos de datos por accidente.
Agrega el atributo required a los campos obligatorios. Los navegadores modernos solicitan y enfocan automáticamente los datos que faltan.
Estrategias de resguardo
La función Autocompletar es una mejora progresiva. En los navegadores que no admiten la función Autocompletar, los usuarios simplemente deberán ingresar sus detalles de pago de forma manual. Las restricciones semánticas de HTML (como type, inputmode, pattern y required) seguirán funcionando de forma adecuada para validar la entrada del usuario y proporcionar los teclados virtuales correctos.