Un formulario de tarjeta de crédito es un momento de alta fricción en el [flujo de compra] en línea (https://stripe.com/resources/more/ecommerce-checkout-best-practices). El formulario pide a los clientes que se detengan, saquen un objeto físico y confíen a una empresa información financiera confidencial, mientras intentan no meter la pata al introducir una larga cadena de dígitos en su computadora o dispositivo móvil. Esto hace que el diseño de la interfaz de usuario (IU) de la compra con tarjeta de crédito sea una de las partes más importantes del proceso de compra. Con una previsión de aumento de las transacciones mundiales con tarjeta de crédito de $16.06 billones en 2023 a $20 billones en 2029, es importante que las empresas lo hagan bien.

A continuación, te explicaremos cómo diseñar un formulario de tarjeta que resulte rápido, claro y fiable.

¿Qué contiene este artículo?

• ¿Cuáles son los elementos clave de una interfaz de usuario (IU) de compra con tarjeta de crédito?
  
• ¿Cómo hacer que los formularios de las tarjetas de crédito sean fáciles, rápidos y funcionales?
  
• ¿Cómo debes gestionar los mensajes de error y la validación de entradas para las tarjetas de crédito?
  

¿Cuáles son los elementos clave de una interfaz de usuario (IU) de compra con tarjeta de crédito?

Un formulario de tarjeta bien diseñado incluye solo lo necesario para completar un pago. Esto es lo que toda interfaz de usuario (IU) de compra con tarjeta de crédito debe incluir y por qué cada pieza es importante:

• Campo del número de tarjeta:__ acepta los principales tipos de tarjeta y detecta automáticamente la marca a medida que el usuario teclea en función de los primeros dígitos. Muestra el logotipo de la tarjeta correspondiente, dado que los elementos visuales pequeños y familiares, como el ícono de Visa o American Express, pueden ayudar a tranquilizar a los usuarios de que aceptas su tipo de tarjeta.

• Fecha de caducidad: la entrada debe estar en el formato MM/AA. Inserta automáticamente la barra después de los dos primeros dígitos. Omite los campos desplegables de mes/año porque ralentizan el proceso. Las pistas de formato (por ejemplo, un marcador de posición que diga «MM/AA») pueden reducir los errores.

• Código de seguridad o valor de verificación de la tarjeta (CVV):__ etiquétalo en lenguaje sencillo («Código de seguridad») en lugar de recurrir a siglas. Añade un sutil ícono de ayuda que indique dónde encontrar el código en la tarjeta. Esto es especialmente útil para los usuarios cuyo código no se encuentra en el lugar habitual del reverso.

• Nombre del titular de la tarjeta: utiliza una etiqueta como «Nombre en la tarjeta» y no impongas un formato demasiado estricto. Algunos equipos ponen este campo en mayúscula automáticamente.

• Código postal de facturación:__ no solicites la dirección de facturación completa, a menos que la necesites. Incluye un campo de código postal solo si es necesario para comprobaciones del servicio de verificación de direcciones (AVS). Mantén el formato lo suficientemente amplio como para admitir distintos tipos de códigos postales internacionales.

• Botón de pago: hazlo obvio. Utiliza una etiqueta en negrita que dirija a la acción, como «Pagar ahora» o «Realizar el pedido». Añade un ícono de candado en el botón para señalar que la página es segura.

¿Cómo hacer que los formularios de tarjetas de crédito sean fáciles, rápidos y funcionales?

Un buen formulario de tarjeta anticipa lo que el usuario está intentando hacer y se lo facilita a medida que avanza. Desde formatear las entradas hasta preservar el contexto, estos son los principios en los que se basa una pantalla de compra que funciona.

• Incluye solo lo necesario: omite cualquier campo que no sea estrictamente necesario. Si no necesitas la dirección de facturación completa, no la pidas. Si tienes la dirección de envío, ofrece una casilla de verificación de «facturación igual que envío» (y márcala previamente).

• Aprovecha al máximo el autocompletado y las funciones inteligentes:__ los navegadores y los dispositivos pueden hacer parte del trabajo pesado. En los móviles, admite el escaneado de tarjetas con cámara siempre que sea posible. Diseña tus campos, de modo que funcionen con el autocompletado integrado para mejorar la velocidad sin cambiar la interfaz de usuario (IU). Utiliza herramientas tales como Link de Stripe para permitir que los clientes habituales seleccionen la información de su tarjeta guardada. Si ya han utilizado el formulario antes, recuerda sus preferencias. Los valores predeterminados inteligentes impulsan el flujo de compra.

• Haz que el formulario guíe al usuario mientras teclea: el formato de entrada tiene que ver con la usabilidad y la prevención de errores. Agrupa automáticamente el número de tarjeta en grupos legibles (por ejemplo, 1111 2222 3333 4444) para que el usuario pueda comprobarlo de un vistazo. Admite el formato específico de la tarjeta: las tarjetas American Express, por ejemplo, siguen un patrón 4-6-5 y la interfaz de usuario (IU) debe adaptarse. Ejecuta una comprobación Luhn mientras el usuario teclea para detectar errores evidentes antes de que pulse «Enviar».

• Minimiza el esfuerzo entre campos: las transiciones entre campos deben parecer invisibles. Haz que avance automáticamente el cursor cuando un campo esté completo; por ejemplo, de MM a AA en la fecha de caducidad. Inserta separadores, como la barra en MM/AA, automáticamente. Esto elimina un punto más de duda o error.

• Añade señales sutiles de confianza: quieres que los usuarios se sientan seguros al introducir sus datos de pago. Añade señales visuales sutiles, como un ícono de candado o una breve línea de texto que indique que el pago es seguro. Asegúrate de que la interfaz de usuario (IU) tenga el mismo aspecto que el resto del sitio web: un estilo fuera de marca puede crear dudas. Evita redirigir a los usuarios sin contexto. Si es necesaria una redirección para una comprobación de fraude, explícalo antes de que se produzca.

• Diseña pensando en el móvil desde el principio: la mayoría de la gente ahora prefiere los teléfonos móviles para hacer compras en línea. Tu formulario debe estar diseñado para los pulgares. Utiliza tipos de entrada numéricos para los campos numéricos, de modo que aparezca el teclado correcto en el móvil. Mantén un diseño sencillo: una sola columna, sin ventanas emergentes ni desplegables difíciles de pulsar. Evita widgets, como los selectores de fechas de calendario para los campos de vencimiento, que no funcionan bien en pantallas pequeñas.

En el mejor de los casos, un formulario de tarjeta de crédito pasa a un segundo plano. Los usuarios no deben preguntarse qué formato esperar, qué paso viene a continuación o si han cometido un error. Si algo va mal, arréglalo rápido. Si todo va bien, no los retrases. Stripe Elements tiene indicaciones de formato, validación en tiempo real y diseño de respuesta incorporados en cada campo, pero los mismos principios se aplican independientemente de las herramientas que utilices.

¿Cómo debes gestionar los mensajes de error y la validación de entradas para las tarjetas de crédito?

Incluso los formularios de pago mejor diseñados tendrán errores, como erratas, tarjetas caducadas o dígitos que faltan. La forma en que tu interfaz de usuario (IU) gestiona esos momentos es una parte clave de la conversión. He aquí cómo hacerlo bien:

Validar entradas en tiempo real

Detectar los problemas obvios con antelación ayuda a los usuarios a solucionarlos antes de que se presenten. Aplica reglas, por ejemplo, que la caducidad debe ser una fecha futura válida y que el CVV debe tener 3 o 4 dígitos.

El tiempo importa. Ejecuta comprobaciones básicas a medida que el usuario teclea (como el algoritmo Luhn para el número de tarjeta), pero no lances errores a mitad de pulsación. Espera a que un campo esté completo y, a continuación, valídalo.

Hacer que los mensajes de error sean específicos y útiles

Los mensajes genéricos como «Entrada no válida» no son útiles. Sé preciso. «El número de tarjeta está incompleto» o «La fecha de vencimiento parece estar en el pasado» ofrecen al usuario algo sobre lo que puede actuar.

Adapta el mensaje al problema: ¿se trata del formato, la falta de datos o algo rechazado por el procesador de pagos?

Indica siempre al usuario cómo solucionar el problema o qué debe intentar a continuación.

Mostrar errores en el lugar correcto

El lugar marca la diferencia en la rapidez con la que un usuario puede recuperarse. Resalta el campo visualmente: muestra los mensajes dentro, al lado o debajo del campo que causó el problema.

Si una tarjeta se rechaza, está bien mostrar ese mensaje de error encima del botón de envío o en la parte superior, pero acompáñalo también de un comentario relevante a nivel del campo.

Preservar la entrada del usuario siempre que sea posible

Pocas cosas resultan más frustrantes para un cliente que tener que volver a introducir todos los datos de su tarjeta por un pequeño error. A menos que sea absolutamente necesario, no borres los campos de la tarjeta tras un intento fallido. Si debes borrar datos sensibles, di por qué («Por seguridad, se ha borrado el número de la tarjeta»).

Mejor aún, evita los errores antes de que el usuario los envíe para no arriesgarte a perder sus datos en primer lugar.

Ofrecer un camino a seguir

Un mensaje de error nunca debe dejar atascado al usuario. Sugiere los pasos a seguir: «Intenta volver a introducir tu [número de tarjeta]» (https://stripe.com/resources/more/what-is-a-virtual-card-number-and-how-can-you-get-one) o «Utiliza una tarjeta diferente si esta se sigue rechazando».

Si lo más probable es que el problema esté del lado del banco, dilo: «Tu banco rechazó este cargo. No se ha efectuado ningún pago».

Enfoca automáticamente el primer campo con un error para que el usuario pueda solucionarlo con rapidez.

Equilibrar la claridad con la seguridad

Existe un equilibrio entre ser útil y dar demasiados detalles, especialmente si estás tratando con probadores de tarjetas o entornos de alto fraude. Si es necesario, puedes agrupar los errores (por ejemplo, «No se pudieron verificar los datos de la tarjeta») para evitar dar pistas a los malos actores. Conoce tu perfil de riesgo y ajusta tu estrategia de errores en consecuencia.

Proporcionar comentarios tras el envío

Cuando los usuarios hagan clic en «Pagar», no los dejes preguntándose qué está pasando. Desactiva el botón, muestra una rueda giratoria o cambia la etiqueta a «Procesando...» mientras el pago está en curso.

• En caso de éxito, muestra una página de pago realizado con éxito, un recibo o un banner de éxito.

• En caso de fallo, responde rápidamente diciéndoles lo que ha pasado y qué hacer al respecto.

Utiliza la validación para generar confianza. Le estás diciendo al usuario: «Nos estamos ocupando de esto. Si algo sale mal, sabrás exactamente qué y por qué». Esa seguridad puede hacer que la gente siga adelante, incluso cuando las cosas no salen según lo previsto.