Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Checkout

Onboarding --> Pre-Step (Post-selección de plan, antes de Step 0)

Propósito: Procesar el pago del plan seleccionado con métodos locales colombianos.
JTBD: “Quiero pagar de forma segura y empezar mi programa sin complicaciones”
Ruta: /onboarding/checkout
Módulo: PAM-2

Features

# Feature Descripción Prioridad
1 Resumen del plan Card con nombre, precio, ciclo de facturación P0
2 Método de pago Tarjeta credito/debito, PSE, Nequi, Daviplata P0
3 Formulario tarjeta Número, vencimiento, CVV, nombre del titular P0
4 Campo cupon Input de código de descuento con validación P1
5 Resumen de cobro Subtotal, descuento, IVA, total P0
6 Terminos Checkbox: aceptar terminos de servicio y politica de reembolso P0
7 CTA positivo “Iniciar mi programa” (no “Pagar”) P0
8 Sello de seguridad “Pago seguro. Tus datos financieros están protegidos.” P0

States

Loading

  • Skeleton shimmer en resumen y formulario (300ms)

Loaded (Normal)

  • Resumen del plan arriba, formulario de pago, resumen de cobro. CTA deshabilitado hasta completar campos.

Validando Pago

  • Spinner en botón, campos deshabilitados. Copy: “Procesando tu pago…”

Pago Exitoso

  • Checkmark animado. Copy: “Listo! Tu programa comienza ahora.” Redirect a /onboarding (Welcome) en 2s.

Pago Fallido

  • “No pudimos procesar tu pago. Verifica los datos o intenta con otro método.”

Pago Rechazado por Banco

  • “Tu banco rechazó la transacción. Contacta a tu banco o usa otro método.”

Cupon Aplicado

  • Subtotal tachado + nuevo total. Inválido: “Este código no es válido o ya expiró”

Conexión Perdida

  • “Sin conexión. Tu información no se perdio. Intenta cuando reconectes.”

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Plan Plan nombre Completo
Precio Plan precio_mensual $149/mes
Ciclo Plan ciclo Mensual
Subtotal Cobro subtotal $149.000 COP
Descuento Cobro descuento -$22.350 COP
IVA Cobro iva $24.063 COP
Total Cobro total $150.713 COP

Acciones

Acción Tipo Resultado
Seleccionar método de pago Tabs Muestra formulario del método elegido
Llenar formulario Input Validación en tiempo real por campo
Aplicar cupon Input + validar Recalcula total si válido
Aceptar terminos Checkbox Habilita CTA
Iniciar mi programa Tap botón Procesa pago, navega a Welcome
Cambiar plan Tap link Vuelve a /onboarding/seleccionar-plan
  • Viene de: Seleccionar Plan
  • Va a: Welcome (Step 0) si pago exitoso
  • Back: /onboarding/seleccionar-plan