up
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user