118 lines
5.7 KiB
HTML
118 lines
5.7 KiB
HTML
<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: rechazado / cancelado -->
|
|
<div x-show="estado === 'rechazado'" x-cloak>
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-9 h-9 text-red-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="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-red-700 mb-2">Pago no aprobado</h1>
|
|
<p class="text-sm text-gray-500 mb-4">Tu pago fue rechazado o cancelado por la pasarela de pago.</p>
|
|
<p class="text-xs text-gray-400 mb-6">Puedes intentarlo nuevamente o contactar a soporte si el problema persiste.</p>
|
|
<a href="/" class="inline-block px-6 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 transition">
|
|
Volver al inicio
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Estado: pendiente -->
|
|
<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 inicial inyectado por el servidor (confirmado | rechazado | pendiente).
|
|
// Si ya viene resuelto no se hace polling.
|
|
estado: '{{ .Estado }}' || 'verificando',
|
|
fechaPago: '{{ .FechaPago }}',
|
|
ref: '{{ .Ref }}',
|
|
intentos: 0,
|
|
maxIntentos: 12,
|
|
intervalo: null,
|
|
|
|
init() {
|
|
// Si el servidor ya resolvió el estado, no hay que hacer polling
|
|
if (this.estado === 'confirmado' || this.estado === 'rechazado') return;
|
|
|
|
if (!this.ref) {
|
|
this.estado = 'pendiente';
|
|
return;
|
|
}
|
|
|
|
// Estado aún indeterminado: arrancar polling
|
|
this.estado = 'verificando';
|
|
this.verificar();
|
|
this.intervalo = setInterval(() => this.verificar(), 3000);
|
|
},
|
|
|
|
async verificar() {
|
|
this.intentos++;
|
|
try {
|
|
const r = await fetch(`/pago/estado?ref=${encodeURIComponent(this.ref)}`);
|
|
const data = await r.json();
|
|
|
|
if (data.estado === 'confirmado' || data.confirmado) {
|
|
this.estado = 'confirmado';
|
|
this.fechaPago = data.fecha_pago || '';
|
|
clearInterval(this.intervalo);
|
|
return;
|
|
}
|
|
if (data.estado === 'rechazado') {
|
|
this.estado = 'rechazado';
|
|
clearInterval(this.intervalo);
|
|
return;
|
|
}
|
|
} catch (_) {}
|
|
|
|
if (this.intentos >= this.maxIntentos) {
|
|
clearInterval(this.intervalo);
|
|
this.estado = 'pendiente';
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|