Formularios de pago

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.

Recursos