Un formulario de pago de una tienda online está entre el cliente y su compra. Siete de cada diez clientes que llegan al pago no terminan de comprar. Casi siempre el motivo es el propio formulario. Este capítulo explica qué necesita de verdad un formulario de pago, qué campos te cuestan ventas y cómo diseñar el camino hacia el pago para que los clientes lleguen hasta el final.
Un formulario de pago de una tienda online es donde un cliente completa una compra en tu web. A diferencia de otros formularios de tu sitio, maneja dinero y compromiso. Recoge direcciones de envío, datos de pago y detalles del pedido. Cada campo extra, cada etiqueta poco clara, cada paso inesperado aleja a los clientes justo cuando estaban listos para comprar.
El abandono de carrito ronda el 70 por ciento en las tiendas online. Es decir, unos siete de cada diez clientes añaden productos al carrito y se van sin pagar. Una investigación sobre usabilidad muestra que los costes inesperados, los procesos de pago complicados y la creación obligatoria de una cuenta son las tres razones principales por las que la gente abandona en el formulario. Todas son decisiones de diseño que tú controlas.
¿Qué campos necesita realmente un formulario de pago?
La primera regla del diseño del pago es pedir solo la información que cambia cómo cumples el pedido. La dirección de envío cambia adónde va. Los datos de pago cambian si va o no. El correo te permite enviar novedades. Todo lo demás es ruido.
1. Dirección de envío
Nombre, calle y número, ciudad, provincia o estado, código postal y país. En productos digitales que no requieren envío, te saltas esta sección por completo. Para productos físicos, mantén estos campos obligatorios y ofrece siempre autocompletado de direcciones: el cliente empieza a escribir y el formulario sugiere direcciones que coincidan. El autocompletado reduce a la mitad el tiempo de escritura y los errores al introducir direcciones que causan problemas en los envíos.
2. Datos de pago
Número de tarjeta, fecha de caducidad y código de seguridad. Estos campos deben ir cifrados y ser gestionados por un procesador de pagos que cumpla PCI. No guardes estos datos en tu propio servidor. Un pago moderno también debe ofrecer monederos digitales. Los monederos del móvil, Google Pay y los servicios de pago de terceros permiten completar el pago con un toque, sin volver a escribir todo el número de tarjeta. En el móvil, los monederos digitales suponen más del 40 por ciento de las transacciones. Si tu formulario no los admite, pierdes ventas frente a la competencia que sí lo hace.
3. Dirección de facturación
Pídela solo si es distinta de la de envío. Una casilla que diga "La dirección de facturación es la misma que la de envío" elimina una sección entera del formulario para la mayoría de los clientes. Si la dirección de facturación es distinta, usa otro campo con autocompletado. La mayoría de los clientes no elegirá esta opción, porque casi todos envían a su casa o a su oficina, donde reciben correo.
4. Correo de contacto
Así envías las confirmaciones de pedido, las novedades del envío y la información de seguimiento. Hazlo obligatorio y valídalo. Envía un correo de confirmación automático a los pocos minutos de la compra para que el cliente sepa que el pedido se hizo. No lo dejes preguntándose si la transacción salió bien.
5. Resumen del pedido
Muestra al cliente exactamente qué compra: cantidad, precio unitario, subtotal, gastos de envío, impuestos y total final. Todas las cifras deben ser visibles antes de que introduzca los datos de pago. Los costes ocultos son la razón principal por la que los clientes abandonan en el último paso. Si el cliente ve el total mientras rellena el formulario, puede decidir con información y es mucho menos probable que se vaya al llegar al campo de pago.
Campos que parecen necesarios pero te cuestan ventas
Estos campos aparecen en muchos formularios de pago de tiendas online, pero no tienen nada que hacer ahí.
Teléfono
Casi nunca lo necesitas en el pago. Las empresas de transporte no lo exigen. Las novedades del seguimiento van por correo. Si hay un problema con la entrega, escribes al cliente, no lo llamas. Este único campo reduce las tasas de finalización entre un 5 y un 10 por ciento porque resulta invasivo justo cuando alguien comparte sus datos de pago. Si de verdad necesitas el teléfono por algún motivo, hazlo opcional y explica por qué en un texto de ayuda.
Nombre de empresa
Esto es para formularios de pago B2B, no para tiendas online de consumo. Incluso en B2B, pídelo solo si el nombre de la empresa afecta al cálculo de impuestos o al envío. Muchas tiendas añaden este campo y nunca usan el dato. Los clientes lo ven innecesario y lo dejan en blanco o abandonan el formulario.
Hora de entrega preferida
Esto va en un segundo paso, cuando el pago ya se ha completado, no en el propio formulario. Deja que los clientes completen primero la compra. Cuando ya han pagado, tu sistema puede enviar un correo automático preguntando cuándo quieren la entrega. Así el formulario de pago se mantiene centrado y rápido.
Mensaje de regalo
En las tiendas que admiten regalos, ofrécelo como un extra opcional una vez hecho el pedido, no durante el pago. Algunos clientes lo querrán. La mayoría lo saltará. Añadirlo al formulario de pago alarga el formulario y reduce la finalización. Después de la compra es el lugar adecuado.
Suscripción a la newsletter
No pidas a los clientes que se unan a tu lista de correo mientras están concentrados en completar una compra. Están pensando en el pago y la entrega, no en marketing. Cuando ya hayan comprado, envía un correo aparte ofreciéndoles unirse a tu lista. Conseguirás más altas de quienes acaban de tener una buena experiencia de compra que de quienes están distraídos con el formulario.
Cómo estructurar el formulario de pago para que los clientes lo terminen
El diseño y el flujo del formulario afectan a la tasa de finalización tanto como el número de campos.
Pago en una sola página para pedidos sencillos
Si tu pedido medio tiene de dos a cuatro artículos y el pago requiere de tres a cinco campos, un formulario de una sola página funciona. Los clientes ven el formulario completo de una vez, lo rellenan todo y lo envían. No tienen que pensar en el avance. Solo lo completan. Funciona especialmente bien con artículos de precio bajo y clientes recurrentes que van rápido.
Pago en varios pasos para pedidos complejos o compras de alto valor
Si los clientes piden muchos artículos, si eligen opciones de envío o si tienen varios métodos de pago entre los que elegir, divide el pago en pasos. El paso uno es la información de envío. El paso dos son los datos de pago. El paso tres es la revisión del pedido. Una barra de progreso que muestre "Paso 2 de 3" mantiene a los clientes avanzando en lugar de abrumarlos con un formulario largo. El pago en varios pasos es especialmente importante en el móvil, donde un formulario largo se sale de la pantalla y parece interminable.
Muestra el resumen del pedido en cada paso
Elijas la estructura que elijas, mantén visible el resumen del pedido durante todo el pago. Los clientes siempre deben saber qué compran y cuánto cuesta. Si tu formulario usa pasos, el resumen aparece en cada paso o en una barra lateral fija. Si el formulario es de una sola página, el resumen aparece a la derecha en el escritorio o encima del formulario en el móvil. Esta visibilidad tranquiliza a los clientes y evita el susto de un coste inesperado que provoca el abandono.
Haz que el botón de enviar sea evidente y de confianza
El texto del botón debe decir "Completar compra" o "Pagar ahora", no "Enviar" ni "Continuar". Usa un color distinto que destaque sobre el fondo del formulario. Añade a su lado un icono de confianza si procede, como un candado SSL, una insignia de seguridad o el logotipo del procesador de pagos. Los clientes necesitan ver que su pago irá cifrado y se gestionará de forma segura.
Opciones de pago que reducen el abandono
El mayor predictor de que se complete el pago es la disponibilidad de opciones de pago. Los clientes esperan poder elegir.
Tarjetas de crédito y débito
Es lo básico. Acepta Visa, Mastercard y American Express. Facilita introducir los datos de la tarjeta con formato automático de los espacios del número y detección automática del tipo de tarjeta al empezar a escribir.
Monederos digitales (Google Pay y similares)
En el móvil, ofrece los monederos digitales como primera opción. Los clientes tocan un botón y su pago está completo. Estas conversiones son entre un 30 y un 50 por ciento más altas que con la introducción de tarjeta tradicional, porque la fricción es muy baja. Un cliente que tiene Google Pay guardado en su teléfono puede pagar en cinco segundos. No le hagas escribir un número de tarjeta.
Servicios de pago de terceros
Los clientes recurrentes que ya tienen cuenta confían en estos servicios. Ofrecerlos como opción aumenta la finalización entre quienes prefieren no introducir los datos de la tarjeta directamente en tu web. Confían más en ese servicio que en ti para sus datos de pago. Respeta esa preferencia y consigue la venta.
Servicios de compra ahora, paga después
Los clientes más jóvenes y quienes compran artículos de precio más alto eligen cada vez más opciones de pago a plazos. Ofrecer estos servicios aumenta la conversión porque amplía tu mercado a clientes que no pueden pagar el precio completo de golpe. Son clientes que no tendrías sin esta opción.
Métodos de pago locales
Si vendes a nivel internacional, investiga los métodos de pago de tus países objetivo. En Alemania, los clientes prefieren la transferencia bancaria. En Japón, el pago en tiendas de conveniencia. En India, los pagos instantáneos desde el móvil. Ofrecer métodos de pago locales en su mercado aumenta la conversión de forma notable. Un cliente que no encuentra su método de pago preferido no se inventará uno nuevo. Comprará en otra parte.
Diseño del pago en el móvil que convierte
Más del 60 por ciento del tráfico de las tiendas online ya viene del móvil. Si tu formulario de pago no funciona en un teléfono, pierdes la mayoría de tus ventas.
Diseño de una sola columna en el móvil
Nunca muestres campos en paralelo en el móvil. Apila todo en una sola columna. Los clientes necesitan desplazarse por el formulario hacia abajo, no hacia los lados. Así resulta manejable. Los campos lado a lado en una pantalla pequeña resultan recargados y confusos.
Áreas táctiles grandes en botones y campos
Los campos y los botones deben medir al menos 44 por 44 píxeles. Los botones más pequeños son difíciles de tocar sin pulsar el objetivo equivocado. Un cliente frustrado por tocar tres veces el botón equivocado abandonará el pago en lugar de seguir intentándolo.
Enfoque automático en cada campo
Cuando un campo es obligatorio, el teclado debe abrirse solo al llegar a él. Cuando el cliente termina un campo, el foco debe pasar al siguiente. Así se elimina el toque manual y se acelera el relleno del formulario.
Resumen del pedido fijo en el móvil
Mantén el total en la parte superior del formulario para que los clientes siempre vean lo que pagan. En el móvil, el resumen del pedido debe quedarse fijo arriba mientras los clientes se desplazan por los campos. Nunca deben desplazarse y perder de vista el precio. Esa incertidumbre provoca el abandono.
Botón de pago fijo en el móvil
El botón "Pagar ahora" debe quedarse fijo en la parte inferior de la pantalla en el móvil. Los clientes recorren todos los campos y el botón siempre está al alcance del pulgar. Así el foco sigue en avanzar.
Cómo presentar los costes para que los clientes no abandonen
La transparencia sobre el coste total no es negociable. Los costes ocultos acaban con las conversiones.
Muestra los gastos de envío antes del pago
En tus páginas de producto y en el carrito, estima el envío según la ubicación del cliente. Hazle saber más o menos cuánto costará el envío antes de que entre al pago. Así evitas la sorpresa en el paso de pago que provoca el abandono. Si el envío es gratis, dilo de forma destacada. El envío gratis es el factor número uno que lleva a los clientes de mirar a comprar.
Calcula los impuestos con precisión en el pago
En cuanto el cliente introduzca su dirección en el pago, calcula y muestra el importe de los impuestos. No le hagas llegar a la pantalla final para ver el total de impuestos. Las sorpresas acaban con las conversiones. En cuanto conocen el total, pueden decidir si continúan.
Muestra cualquier comisión desde el principio
Si cobras una comisión de gestión por ciertos métodos de pago, muéstrala antes de que el cliente elija ese método. No cargues comisiones sobre el total que esperaba pagar. Los clientes se sienten engañados y muchos abandonarán el carrito en lugar de continuar.
Sin ventas adicionales inesperadas en el pago
Este es un formulario de pago, no una página de ventas. No ofrezcas envoltorio de regalo, garantías ni donaciones en el paso de pago. Los clientes están centrados en completar la transacción. Las ofertas adicionales parecen trucos y reducen la finalización. Si quieres ofrecer extras, hazlo en la página del carrito antes de que empiece el pago.
Señales de seguridad que generan confianza
Cuando los clientes introducen los datos de pago, necesitan sentirse seguros. Las señales de confianza importan.
Muestra el candado SSL
Asegúrate de que tu página de pago tenga un certificado SSL activo. El candado debe aparecer en la barra de direcciones del navegador y la URL debe mostrar https y no http. Muchos clientes lo buscan. Si falta, no introducirán sus datos de pago.
Muestra las insignias de seguridad de tu procesador de pagos
Si usas un procesador de pagos, muestra su insignia. Si ofreces un servicio de pago de terceros, muestra su logotipo. Los clientes reconocen estos logotipos y confían en que su pago lo gestionará de forma segura una empresa conocida.
Incluye una garantía de confianza o una promesa de devolución del dinero
Cerca del botón de pago, incluye una frase que tranquilice a los clientes sobre la protección de su compra. "Tu pago va cifrado y es seguro" o "Respaldado por nuestra garantía de devolución de 30 días." Esto elimina la última duda que impide a alguien pulsar el botón de pago.
Errores comunes en el formulario de pago que acaban con las conversiones
Estos errores aparecen en muchas tiendas online y cuestan ventas todos los días.
Obligar a crear una cuenta antes del pago
Es la forma más rápida de perder una venta. Algunos clientes quieren crear una cuenta para futuras compras. La mayoría quiere comprar una vez y marcharse. Haz opcional la creación de cuenta y ofrece el pago como invitado como camino por defecto. Puedes escribir a los clientes después de la compra e invitarlos a crear una cuenta. Un cliente que acaba de comprarte tiene muchas más probabilidades de crear una cuenta que un desconocido obligado a crearla antes de comprar.
Exigir más campos de los necesarios
Algunas tiendas exigen teléfono, nombre de empresa y código postal además de los campos estándar. Cada campo obligatorio que no afecta al cumplimiento del pedido reduce las tasas de finalización. Prueba con menos campos obligatorios. Verás más finalización y menos abandono de carrito.
Etiquetas de campo vagas
No escribas "Estado/Provincia/Otro." Escribe lo que quieres. "Estado o provincia." No escribas "zona de código postal." Escribe "Código postal." Las etiquetas claras eliminan la confusión y mantienen a los clientes avanzando.
No validar los campos mientras el cliente escribe
Cuando un cliente introduce un correo con un error, el formulario debe señalarlo enseguida, no esperar a que envíe el formulario entero. Muestra marcas verdes cuando un campo es correcto y mensajes de error cuando no lo es, en tiempo real. Así evitas que los clientes pierdan tiempo rellenando un formulario que no se enviará.
Mensajes de error débiles
No muestres "Dato no válido." Muestra "El correo debe incluir el símbolo @." No muestres "Este campo es obligatorio." Muestra "Introduce tu calle y número." Los mensajes de error concretos dicen a los clientes exactamente qué falla y cómo arreglarlo. Los mensajes vagos frustran a los clientes y aumentan el abandono.
Un pago lento
Prueba tu formulario de pago con una conexión 3G lenta. ¿Carga rápido? ¿Puede el cliente rellenarlo sin largas esperas? Si tu formulario carga imágenes, ejecuta scripts pesados o hace llamadas innecesarias a la API, se sentirá lento. Las páginas lentas aumentan el abandono. Optimiza la velocidad.
Crear formularios de pago con WEMASY
El sistema de tienda online de WEMASY incluye formularios de pago prediseñados y optimizados para convertir. El formulario se adapta al móvil, admite varios métodos de pago, muestra resúmenes del pedido durante todo el pago y se integra con tu inventario y tu sistema de correo. Los clientes pueden pagar como invitados, guardar métodos de pago para futuros pedidos y recibir confirmaciones y avisos de envío automáticos. Tu pago está activo en cuanto conectas tu procesador de pagos. Consulta qué incluye cada plan en /pricing.