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 seguro y fácil de usar.
Asegúrate de que los usuarios sepan qué completar.
Tu forma de pago debe ser lo más simple posible. y se muestran solo los campos obligatorios.
Indique el importe del pago. Para ello, haz clic en el botón Enviar.
<button>Pay $300.00</button>
Usa frases claras para tus elementos <label>.
Por ejemplo, usa "Código de seguridad"
en lugar de un acrónimo como “CVV” que solo algunas marcas usan.
Ayuda a los usuarios a ingresar sus detalles de 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" para los campos del número de tarjeta y del código de seguridad
para mostrar un teclado en pantalla optimizado para ingresar números.
Agrega los valores de autocomplete adecuados a los controles de tu forma de pago para garantizar que los navegadores ofrezcan la función Autocompletar.
Usa autocomplete="cc-name" como nombre,
autocomplete="cc-number" por el número de tarjeta y autocomplete="cc-exp" por la fecha de vencimiento.
Asegúrate de que los usuarios ingresen datos en el formato correcto
Usa el atributo required en cada <input> para asegurarte de que los usuarios completen el formulario.
Los códigos de seguridad de las 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 para el número de 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.