加载 Paypal JS 和智能按钮 onclick/onmouseover答案

【问题标题】：Load Paypal JS and smart buttons onclick/onmouseover加载 Paypal JS 和智能按钮 onclick/onmouseover
【发布时间】：2023-01-14 20:27:08
【问题描述】：

我想使用 Paypal 的智能按钮，因为卡支付也作为一个选项插入，并且访问者/客户无需离开我的页面即可购买。使用 Pp 代码工作正常，但我更喜欢加载外部 javascript 并在单击或鼠标悬停时呈现按钮，主要是为了速度和 SEO 目的。据我所知，以下应该有效：

<a href="#" onclick="initPayPalButton();this.onclick= null;">Pay by Paypal</a>
<script>
// uncommented by me  window.addEventListener('load', function() {
    function initPayPalButton() {
        paypal.Buttons({ // and here is the Uncaught ReferenceError: paypal is not defined
            style: {
                shape: 'rect',
                color: 'gold',
                layout: 'vertical',
                label: 'checkout',
            },
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        "description": "My awesome product",
                        "amount": {
                            "currency_code": "USD",
                            "value": 111
                        }
                    }]
                });
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(orderData) {
                    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                    const element = document.getElementById('paypal-button-container');
                    element.innerHTML = '';
                    element.innerHTML = '<h3>Thank you for your payment!</h3>';
                });
            },
            onError: function(err) {
                console.log(err);
            }
        }).render('#paypal-button-container');
//my approach starts
        var e = document.createElement("script");
    e.type = "text/javascript", e.async = 0, e.src = "https://www.paypal.com/sdk/js?client-id=xxx-yyy&enable-funding=venmo&currency=USD", (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(e);
//my approach ends
    }
// uncommented by me    initPayPalButton();
// uncommented by me });
</script>
<!--  uncommented by me <script async src="https://www.paypal.com/sdk/js?client-id=xxx-yyy&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>-->

惨遭失败，错误消息为“Uncaught ReferenceError: paypal is not defined”。您可以在上面看到错误发生的位置。

请帮忙。我也在使用 jQuery，所以任何有效的 jQuery 解决方案都将受到赞赏。

我试图将 sdk js 附加到 render('#paypal-button-container') 之上，但它没有用。我还尝试让 2 个函数由 onclick 触发，一个用于加载 sdk，第二个用于呈现按钮......仍然没有用。

【问题讨论】：

标签： javascript jquery paypal onclick onmouseover

【解决方案1】：

您需要一个 onload 回调函数来调用 paypal.Buttons后PayPal JS SDK 脚本完成加载。这是一个 loadAsync 辅助函数...

//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);
}

// Example usage -- a callback function is inlined here
// (but could be a named function like your own initPayPalButton)
loadAsync('https://www.paypal.com/sdk/js?client-id=test&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');
});

我不一定赞同你只加载 JS SDK onclick/onmouseover 的想法；如果您在页面加载时将按钮渲染到 style="display:none;" 的容器 div，然后让您的 onclick/onmouseover 用 $('#paypal-button-container').show(); 或类似的显示它们，按钮会显示得更快

【讨论】：