Javascript 为脚本标记自定义自己的src时未定义Paypal

在我的项目中，我使用PayPal实现（）使付款成为可能

在第一个例子中，我询问客户他喜欢哪种付款方式，并在此基础上生成相应的付款按钮（贝宝、信用卡或bancontact）。当我使用下面的代码时，我得到以下错误：

未捕获引用错误：未定义paypal

正如您在下面看到的，在触发PayPal代码之前，我将正确的脚本标记添加到我的HTML代码中，所以这应该不是问题

HTML代码（贝宝div）

---

以这种方式加载脚本是异步的并且需要时间，因此您应该使用

onload

事件回调

//Helper function

function loadAsync(url, callback) {
  var s = document.createElement('script');
  s.setAttribute('src', url); s.onload = callback;
  document.head.insertBefore(s, document.head.firstElementChild);
}

// Usage -- callback is inlined here, but could be a named function

loadAsync('https://www.paypal.com/sdk/js?client-id=sb&currency=USD', function() {
  paypal.Buttons({

    // Set up the transaction
    createOrder: function(data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '0.01'
                }
            }]
        });
    },

    // Finalize the transaction
    onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
           //...
        });
    }

  }).render('#paypal-button-container');
});

---

在我看来，在脚本加载完成之前，您正在调用

paypal.Buttons

。

let radios = document.querySelectorAll('.pm');
const script = document.createElement("script");
let src = '';

radios.forEach(radio => {
    if (radio.checked) {
        supper_data.payment_method = (radio.value).charAt(0).toUpperCase() + (radio.value).slice(1);   

        if((radio.value).charAt(0).toUpperCase() + (radio.value).slice(1) === "Bancontact") { 
            src = 'https://www.paypal.com/sdk/js?client-id=ASuRqSAZYj9/*...*/-FEXCHWao5SA7-SADYX6werETXouaJDIBP1UeSAJpJbMbrtCOy59C7C-C&currency=EUR&disable-funding=card,sofort,credit';
        } else if (supper_data.payment_method === "Visa") {
            src = 'https://www.paypal.com/sdk/js?client-id=ASuRqSAZYj9/*...*/-FEXCHWao5SA7-SADYX6werETXouaJDIBP1UeSAJpJbMbrtCOy59C7C-C&currency=EUR&disable-funding=bancontact,sofort,credit';
        } else {
            src = 'https://www.paypal.com/sdk/js?client-id=ASuRqSAZYj9/*...*/-FEXCHWao5SA7-SADYX6werETXouaJDIBP1UeSAJpJbMbrtCOy59C7C-C&currency=EUR&disable-funding=bancontact,sofort,card';
        }

    }
});

script.type = "text/javascript";
script.src = src;
document.head.append(script);

document.querySelector('#paypal-button-container').style.display = "block";

paypal.Buttons({
    style: {
        shape: 'pill',
        color: 'blue'
    },
    createOrder: (data, actions) => {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    currency_code: "EUR",
                    value: price
                }
            }]
        });
    },
    onApprove: (data, actions) => {
        return actions.order.capture().then((details) => {
            $.ajax({
                url: "./includes/delete-cart.php",
                method: "GET",
                success: function (data) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Betaling Afgerond',
                        text: 'Uw bestelling is ontvangen.'
                    }).then(() => {
                        window.location.reload();
                    })
                    console.log(details);
                }
            });
        })
    }
}).render('#paypal-button-container');

//Helper function

function loadAsync(url, callback) {
  var s = document.createElement('script');
  s.setAttribute('src', url); s.onload = callback;
  document.head.insertBefore(s, document.head.firstElementChild);
}

// Usage -- callback is inlined here, but could be a named function

loadAsync('https://www.paypal.com/sdk/js?client-id=sb&currency=USD', function() {
  paypal.Buttons({

    // Set up the transaction
    createOrder: function(data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '0.01'
                }
            }]
        });
    },

    // Finalize the transaction
    onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
           //...
        });
    }

  }).render('#paypal-button-container');
});