El formulario de pago suele ser el último paso antes de completar una compra. Para maximizar las conversiones, asegúrate de que tu formulario de pago sea fácil de usar y seguro.
Asegúrate de que los usuarios sepan qué completar
Tu formulario de pago debe ser lo más simple posible; muestra solo los campos obligatorios.
Indique el importe del pago. Para ello, es ideal el botón Enviar.
<button>Pay $300.00</button>
Usa frases que sean claras para los elementos <label>
.
Por ejemplo, usa “Código de seguridad” en lugar de las siglas como “CVV”, que solo usan algunas marcas.
Ayuda a los usuarios a ingresar sus detalles del pago
Para maximizar las conversiones, asegúrate de que los usuarios puedan completar tu formulario de pago lo más rápido posible.
Usa inputmode="numeric"
en los campos de número de tarjeta y código de seguridad para mostrar un teclado en pantalla optimizado para ingresar números.
Agrega valores de autocomplete
adecuados a los controles de tu formulario de pago para asegurarte de que los navegadores ofrezcan la función Autocompletar.
Usa autocomplete="cc-name"
para el nombre, autocomplete="cc-number"
para el número de la tarjeta y autocomplete="cc-exp"
para la fecha de vencimiento.
Asegúrate de que los usuarios ingresen los datos en el formato correcto.
Usa el atributo required
para cada <input>
a fin de garantizar que los usuarios completen el formulario.
Los códigos de seguridad de tarjetas de pago pueden tener tres o cuatro dígitos.
Usa minlength="3"
y maxlength="4"
para permitir solo tres y cuatro dígitos.
Asegúrate de que los usuarios solo ingresen números de la tarjeta y el código de seguridad.
Usa pattern="[0-9 ]+"
para permitir que los usuarios incluyan espacios cuando ingresen un número de tarjeta, ya que así es como se muestran los números en las tarjetas físicas.