p

2026-05-01 13:44:37 -05:00
parent be28fea806
commit 3f6eb7dddc
7 changed files with 191 additions and 12 deletions
@@ -0,0 +1,93 @@
+<div x-data="pagoApp()" x-init="init()" class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-2xl shadow-lg max-w-md w-full p-8 text-center">
+
+        <!-- Estado: verificando -->
+        <div x-show="estado === 'verificando'" x-cloak>
+            <svg class="animate-spin h-12 w-12 text-[#8eb02f] mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+            </svg>
+            <h1 class="text-xl font-bold text-gray-700 mb-2">Verificando tu pago…</h1>
+            <p class="text-sm text-gray-400">Estamos confirmando con la pasarela. Esto puede tomar unos segundos.</p>
+        </div>
+
+        <!-- Estado: confirmado -->
+        <div x-show="estado === 'confirmado'" x-cloak>
+            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg class="w-9 h-9 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
+                </svg>
+            </div>
+            <h1 class="text-2xl font-bold text-green-700 mb-2">¡Pago confirmado!</h1>
+            <p class="text-sm text-gray-500 mb-1">Tu pago fue procesado exitosamente.</p>
+            <p x-show="fechaPago" class="text-xs text-gray-400 mb-6">Fecha: <span x-text="fechaPago"></span></p>
+            <a href="/" class="inline-block px-6 py-2 bg-[#8eb02f] text-white rounded-lg text-sm font-medium hover:bg-[#7a9a29] transition">
+                Volver al inicio
+            </a>
+        </div>
+
+        <!-- Estado: pendiente (sin ref o no encontrado aún) -->
+        <div x-show="estado === 'pendiente'" x-cloak>
+            <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg class="w-9 h-9 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                </svg>
+            </div>
+            <h1 class="text-xl font-bold text-yellow-700 mb-2">Pago en proceso</h1>
+            <p class="text-sm text-gray-500 mb-4">
+                Tu pago está siendo procesado. Recibirás una confirmación por correo en breve.
+            </p>
+            <p class="text-xs text-gray-400 mb-6">Si realizaste el pago, puede tardar algunos minutos en reflejarse.</p>
+            <a href="/" class="inline-block px-6 py-2 bg-[#8eb02f] text-white rounded-lg text-sm font-medium hover:bg-[#7a9a29] transition">
+                Volver al inicio
+            </a>
+        </div>
+
+    </div>
+</div>
+
+<script>
+function pagoApp() {
+    return {
+        estado: 'verificando',
+        fechaPago: '',
+        ref: '',
+        intentos: 0,
+        maxIntentos: 10,
+        intervalo: null,
+
+        init() {
+            const params = new URLSearchParams(window.location.search);
+            this.ref = params.get('ref') || '';
+
+            if (!this.ref) {
+                this.estado = 'pendiente';
+                return;
+            }
+
+            this.verificar();
+            this.intervalo = setInterval(() => this.verificar(), 3000);
+        },
+
+        async verificar() {
+            this.intentos++;
+            try {
+                const r = await fetch(`/api/pago-estado?ref=${encodeURIComponent(this.ref)}`);
+                const data = await r.json();
+
+                if (data.confirmado) {
+                    this.estado = 'confirmado';
+                    this.fechaPago = data.fecha_pago || '';
+                    clearInterval(this.intervalo);
+                    return;
+                }
+            } catch (_) {}
+
+            if (this.intentos >= this.maxIntentos) {
+                clearInterval(this.intervalo);
+                this.estado = 'pendiente';
+            }
+        },
+    };
+}
+</script>