ReactJS集成PayPal订阅：onApprove后窗口不自动关闭解决方案

在React项目中集成PayPal订阅支付时，遇到onApprove回调执行完成后，PayPal弹窗窗口无法自动关闭的问题。

原实现的关键代码如下：

useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://www.paypal.com/sdk/...";
    script.onload = () => {
        if (document.getElementById('paypal-button-container-...')) {
            window.paypal.Buttons({
                style: {
                    shape: 'rect',
                    color: 'black',
                    layout: 'vertical',
                    label: 'subscribe'
                },
                createSubscription: function(data, actions) {
                    return actions.subscription.create({
                        'plan_id': '...'
                    });
                },
                onApprove: function(data, actions) {
                    console.log("Zahlung erfolgreich genehmigt!", data);
                    alert(data.subscriptionID);
                },
                onCancel: function(data) {
                    console.log("Zahlung wurde vom Benutzer abgebrochen.", data);
                },
                onError: function(err) {
                    console.error("Beim Verarbeiten der Zahlung ist ein Fehler aufgetreten:", err);
                }
            }).render('#paypal-button-container-...');
        }
    };
    document.body.appendChild(script);
    return () => {
        document.body.removeChild(script);
    }
}, []);

问题原因与解决方法 #

PayPal的JS SDK需要在onApprove回调中返回一个Promise，以此确认异步处理流程已完成，才会自动关闭弹窗窗口。原代码的onApprove仅执行同步操作（日志、弹窗），没有返回Promise，导致SDK无法判断何时关闭窗口。

修正方法是在onApprove中调用actions.subscription.get()获取订阅详情，同时返回该方法的Promise，让SDK等待异步操作完成后自动关闭窗口：

onApprove: function(data, actions) {
    return actions.subscription.get().then(details => {
        console.log("Zahlung erfolgreich! Danke ");
        // 可在此添加自定义业务逻辑，比如将订阅ID同步到后端
    });
},

将上述修正后的onApprove替换原代码中的对应部分，即可解决窗口不自动关闭的问题。

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