This commit is contained in:
Lizandro Guarnizo
2026-05-02 09:41:58 -05:00
parent 369930668f
commit c3b2bbc413
3 changed files with 96 additions and 65 deletions
+32 -8
View File
@@ -26,7 +26,22 @@
</a>
</div>
<!-- Estado: pendiente (sin ref o no encontrado aún) -->
<!-- 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">
@@ -49,22 +64,26 @@
<script>
function pagoApp() {
return {
estado: 'verificando',
fechaPago: '',
ref: '',
// 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: 10,
maxIntentos: 12,
intervalo: null,
init() {
const params = new URLSearchParams(window.location.search);
this.ref = params.get('ref') || '';
// 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);
},
@@ -75,12 +94,17 @@ function pagoApp() {
const r = await fetch(`/api/pago-estado?ref=${encodeURIComponent(this.ref)}`);
const data = await r.json();
if (data.confirmado) {
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) {