94 lines
4.2 KiB
HTML
94 lines
4.2 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: 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>
|