El problema de redireccion del widget de checkout: popups, polling y postMessage

typescript// widget/src/redirect-handler.ts
class RedirectHandler {
    private popup: Window | null = null;
    private pollInterval: number | null = null;

    async handleRedirect(redirectUrl: string, transactionId: string): Promise<PaymentResult> {
        return new Promise((resolve, reject) => {
            // Intentar abrir popup
            this.popup = window.open(
                redirectUrl,
                '0fee-payment',
                'width=500,height=700,scrollbars=yes,resizable=yes'
            );

            if (this.popup && !this.popup.closed) {
                // Popup abierto exitosamente
                this.waitForPopupResult(transactionId, resolve, reject);
            } else {
                // Popup bloqueado -- respaldo a nueva pestaña
                this.handlePopupBlocked(redirectUrl, transactionId, resolve, reject);
            }
        });
    }

    private waitForPopupResult(
        transactionId: string,
        resolve: (result: PaymentResult) => void,
        reject: (error: Error) => void,
    ): void {
        // Escuchar postMessage de la pagina de callback
        const messageHandler = (event: MessageEvent) => {
            if (event.data?.type === '0fee-payment-result' &&
                event.data?.transactionId === transactionId) {
                window.removeEventListener('message', messageHandler);
                this.cleanup();

                if (event.data.status === 'completed') {
                    resolve(event.data);
                } else {
                    reject(new Error(event.data.error || 'Payment failed'));
                }
            }
        };

        window.addEventListener('message', messageHandler);

        // Tambien consultar cierre del popup (usuario lo cerro manualmente)
        this.pollInterval = window.setInterval(() => {
            if (this.popup?.closed) {
                window.removeEventListener('message', messageHandler);
                this.cleanup();
                reject(new Error('Payment window was closed'));
            }
        }, 500);

        // Timeout despues de 10 minutos
        setTimeout(() => {
            window.removeEventListener('message', messageHandler);
            this.cleanup();
            reject(new Error('Payment timed out'));
        }, 600_000);
    }

    private cleanup(): void {
        if (this.pollInterval) {
            clearInterval(this.pollInterval);
            this.pollInterval = null;
        }
        if (this.popup && !this.popup.closed) {
            this.popup.close();
        }
        this.popup = null;
    }
}

html<!-- frontend/src/routes/widget-callback/+page.svelte -->
<!-- Esta es la pagina a la que Stripe/PayPal redirige despues del pago -->
<script>
    import { onMount } from 'svelte';
    import { page } from '$app/stores';

    let status = 'processing';
    let message = 'Completing your payment...';

    onMount(async () => {
        const params = new URLSearchParams($page.url.search);
        const transactionId = params.get('transaction_id');
        const paymentStatus = params.get('status');

        // Verificar estado del pago con el backend
        const response = await fetch(
            `${API_URL}/transactions/${transactionId}/status`
        );
        const result = await response.json();

        // Enviar resultado a la ventana padre (la pagina del comerciante con el widget)
        if (window.opener) {
            window.opener.postMessage({
                type: '0fee-payment-result',
                transactionId: transactionId,
                status: result.status,
                amount: result.source_amount,
                currency: result.source_currency,
            }, '*');

            status = 'complete';
            message = 'Payment complete. This window will close automatically.';

            // Auto-cerrar despues de 2 segundos
            setTimeout(() => window.close(), 2000);
        } else {
            // Sin opener (navegacion directa) -- mostrar resultado y redirigir
            status = result.status;
            message = result.status === 'completed'
                ? 'Payment successful! You can close this tab.'
                : 'Payment was not completed.';
        }
    });
</script>

<div class="callback-page">
    <div class="status-card">
        {#if status === 'processing'}
            <div class="spinner"></div>
        {:else if status === 'completed'}
            <div class="checkmark">&#10003;</div>
        {:else}
            <div class="cross">&#10007;</div>
        {/if}
        <p>{message}</p>
    </div>
</div>

typescript// widget/src/redirect-handler.ts (continuacion)
private handlePopupBlocked(
    redirectUrl: string,
    transactionId: string,
    resolve: (result: PaymentResult) => void,
    reject: (error: Error) => void,
): void {
    // Actualizar estado del widget para mostrar instrucciones
    this.updateWidgetState('redirect_blocked');

    // Abrir en nueva pestaña (menos probable de ser bloqueada)
    window.open(redirectUrl, '_blank');

    // Consultar backend por estado cada 2 segundos
    this.pollInterval = window.setInterval(async () => {
        try {
            const response = await fetch(
                `${API_URL}/transactions/${transactionId}/status`
            );
            const result = await response.json();

            if (result.status === 'completed') {
                this.cleanup();
                resolve(result);
            } else if (result.status === 'failed' || result.status === 'expired') {
                this.cleanup();
                reject(new Error(`Payment ${result.status}`));
            }
            // Estado 'pending': seguir consultando
        } catch (error) {
            // Error de red: seguir consultando (puede ser temporal)
            console.warn('Status poll failed, retrying...', error);
        }
    }, 2000);

    // Timeout despues de 10 minutos
    setTimeout(() => {
        this.cleanup();
        reject(new Error('Payment timed out'));
    }, 600_000);
}

typescript// widget/src/states.ts
type WidgetState =
    | 'idle'              // Estado inicial, mostrando formulario de pago
    | 'processing'        // Enviando solicitud al backend
    | 'redirect_waiting'  // Popup abierto, esperando resultado
    | 'redirect_blocked'  // Popup bloqueado, consultando resultado
    | 'completed'         // Pago exitoso
    | 'failed'            // Pago fallido
    | 'expired';          // Pago expirado

typescript// Validacion del lado del widget
const messageHandler = (event: MessageEvent) => {
    // Validar estructura del mensaje
    if (event.data?.type !== '0fee-payment-result') return;

    // Validar que el ID de transaccion coincida con lo que esperamos
    if (event.data?.transactionId !== pendingTransactionId) return;

    // IMPORTANTE: NO confiar en el estado del postMessage solo
    // Verificar con el backend antes de mostrar exito
    verifyWithBackend(event.data.transactionId).then(result => {
        if (result.status === 'completed') {
            resolve(result);
        }
    });
};