新窗口打开PayPal授权后关闭时调用JS函数的实现难题

我之前在Prestashop里做自定义PayPal支付时也碰到过一模一样的坑，跨域弹窗的事件监听确实不好使，给你几个亲测有效的方案：

方案一：利用同域回调页实现父子窗口通信（最稳妥） #

核心思路是绕开跨域限制，让PayPal授权完成后跳转到你自己的同域回调页面，再通过这个页面通知父窗口执行后续操作。

步骤1：配置PayPal授权回调地址 #

在你的PHP后端生成PayPal授权链接时，把return_url设置为你模块下的自定义回调页面（比如/modules/your_custom_paypal_module/paypal_callback.php），这个页面必须和前台购物页面同域，才能避开跨域安全限制。

步骤2：回调页面处理逻辑 #

在paypal_callback.php里，先完成PHP端的PayPal支付验证（调用PayPal REST API确认支付状态、更新Prestashop订单），然后输出一段前端代码：

<?php
// 这里先写PHP逻辑：验证PayPal支付结果、更新Prestashop订单状态等
// ...

// 输出JS代码通知父窗口并关闭弹窗
?>
<script>
// 检查父窗口是否存在且目标函数可调用
if (window.opener && typeof window.opener.verifyPayment === 'function') {
    window.opener.verifyPayment();
}
// 关闭当前弹窗
window.close();
</script>

步骤3：父页面打开弹窗的代码 #

用jQuery打开弹窗时，加个定时器做兜底检查（防止回调页因意外没触发的情况）：

$('.custom-paypal-btn').click(function() {
    // 先通过Ajax获取PayPal授权跳转链接
    $.ajax({
        url: '/modules/your_custom_paypal_module/get_paypal_redirect.php',
        method: 'POST',
        data: {order_id: '你的订单ID'},
        success: function(resp) {
            // 打开固定尺寸的弹窗
            const popup = window.open(
                resp.data.redirect_uri, 
                'PayPalAuth', 
                'width=800,height=600,top=100,left=100,toolbar=no,menubar=no'
            );
            
            // 定时检查弹窗是否关闭，做兜底处理
            const checkPopupTimer = setInterval(() => {
                if (popup.closed) {
                    clearInterval(checkPopupTimer);
                    // 兜底执行验证逻辑
                    verifyPayment();
                }
            }, 1000);
        }
    });
});

步骤4：父页面的验证更新函数 #

实现verifyPayment函数，完成Ajax请求和页面更新：

function verifyPayment() {
    $.ajax({
        url: '/modules/your_custom_paypal_module/verify_payment_status.php',
        method: 'POST',
        data: {order_id: '你的订单ID'},
        success: function(resp) {
            if (resp.success) {
                // 更新页面内容，比如显示支付成功、跳转订单确认页
                $('.payment-status').html('<span style="color:green">支付成功！</span>');
                setTimeout(() => {
                    window.location.href = '/order-confirmation.php';
                }, 2000);
            } else {
                $('.payment-status').html('<span style="color:red">支付失败，请重试</span>');
            }
        },
        error: function() {
            $('.payment-status').text('网络异常，请稍后检查订单状态');
        }
    });
}

为什么之前的onbeforeunload无效？ #

当弹窗跳转到PayPal的域名后，浏览器的跨域安全策略会阻止父窗口监听弹窗的卸载事件——因为两个窗口属于不同域名，父窗口无法获取弹窗的任何状态变化，自然触发不了事件。只有当弹窗回到你自己的同域页面时，才能正常通信。

Prestashop额外注意点 #

• 回调页面要做好权限校验：比如检查当前用户是否是订单的所有者，防止恶意请求篡改订单状态。
• PayPal API调用要使用官方SDK：Prestashop本身有PayPal模块的基础，可以参考它的API调用逻辑，避免自己写原生请求出现签名错误。

内容的提问来源于stack exchange，提问作者Ciubakka