Checkout y Payment

El checkout multi-paso reduce la carga cognitiva por pantalla, pero solo funciona si el usuario sabe donde esta y cuanto falta. Baymard documenta que checkouts sin indicador de progreso suben la ansiedad y el abandono ~15%. Usa una barra segmentada (3-4 pasos), nunca más de 5; marca completados con check, activo con acento, pendientes en text-3.

El comprador debe poder confirmar que paga por lo correcto sin volver atras. En desktop, ancla el resumen en un sidebar sticky (~340px) con miniaturas, subtotal, envio e impuestos desglosados; en mobile colapsalo en un acordeon expandible sobre el CTA. Nunca ocultes el total final hasta el último paso.

El input de tarjeta debe agrupar los digitos en bloques de 4 (#### #### #### ####), aplicar mascara MM/AA a la expiración y limitar el CVV. Detecta la red por el prefijo BIN (4=Visa, 5=Mastercard, 34/37=Amex) y muestra su logo dentro del campo. Baymard reporta que el autoformato reduce errores de captura ~22%.

Un campo de cupon grande y prominente sabotea conversión: quien no tiene código siente que paga de más y abandona a buscarlo. Wroblewski recomienda un link discreto "Tengo un código" que despliega el campo bajo demanda. Manten el resto del flujo intacto y confirma el ahorro con una línea de descuento clara al aplicarse.

Un "Pago rechazado" genérico deja al usuario sin salida y mata la venta. Traduce el código del procesador a lenguaje humano (fondos insuficientes, CVV incorrecto, tarjeta vencida) y ofrece siempre la siguiente acción: corregir un campo, usar otra tarjeta o contactar al banco. Conserva los datos ya capturados; nunca vacies el formulario.

Forzar registro antes de comprar es la segunda causa de abandono según Baymard (~24%). Ofrece pagar como invitado por defecto y propon crear cuenta solo después de la compra, con un click (el email y datos ya están capturados). Nunca un muro de login entre el carrito y el pago.

En el momento de capturar la tarjeta el usuario evalua si el sitio es seguro. Agrupa candado SSL, badges de redes aceptadas y una garantía (devolución, pago protegido) junto al CTA y al campo de tarjeta, no en el footer. Señales reales y verificables; un sello inventado destruye la confianza al primer clic.

La pantalla de confirmación cierra el ciclo y reduce ansiedad post-compra. Debe incluir confirmación visual de exito, número de orden copiable, resumen de lo comprado, total cobrado, y proximos pasos concretos (email de recibo, fecha estimada de entrega, tracking). Nngroup la considera tan critica como el propio formulario de pago.