Integración de pagos (Demo 3)

Simulación de checkout y estados para mostrar el flujo de pago.

Solo demostración. Un pago real requiere backend y configuración de pasarela (PayU/Paymentez).

¿Qué muestra?

Pequeña demo para explicar a clientes cómo se ve un flujo de pago típico.

  • Carrito y checkout
  • Estados de transacción
  • Notificación tipo webhook (simulada)

Flujo de pago simulado

Navega por los pasos: Carrito → Checkout → Resultado.

Carrito

Tres productos de ejemplo para ilustrar el flujo.

Producto Precio Cantidad Subtotal
Landing básica $190.000
1
$190.000
Módulo e‑commerce $420.000
0
$0
Soporte mensual $95.000
0
$0
Subtotal: $0
IVA (19%): $0
Total: $0

Este total es el que se envía a la pasarela en un proyecto real.

Resultado y estado de la transacción

Tarjeta resumen con el último estado conocido.

Aún no hay transacción seleccionada. Crea una desde el checkout o elige alguna en el historial.

Webhook simulado

Simula cómo la pasarela notifica cambios de estado al backend.

En un proyecto real, la pasarela notifica al servidor y este actualiza la orden.

Mapa del flujo real

Checklist simplificado de un flujo típico de integración de pagos.

  1. Crear orden en backend
  2. Redirigir a pasarela o tokenizar tarjeta
  3. Recibir webhook de confirmación
  4. Validar firma y seguridad
  5. Actualizar orden y estados internos
  6. Notificar al usuario (correo / pantalla)

Historial de transacciones (demo)

Los registros se guardan en tu navegador usando localStorage.

ID Cliente Total Estado Fecha Acción