如何通过代码渲染 paypal 智能按钮？

Question

这是呈现 paypal 智能按钮的代码：

<script src="https://www.paypal.com/sdk/js?client-id=test"></script> 
<script>paypal.Buttons().render('body');</script>

但我想通过代码呈现它们，所以我尝试这样做：

document.body.innerHTML='<script src="https://www.paypal.com/sdk/js?client-id=test"></script>';
paypal.Buttons().render('body');

但它没有用，我该如何实现呢？

Answer 1

将脚本元素添加到 DOM 将导致它们异步加载，而不是及时为紧随其后的代码使用它们。 您需要为脚本的onload事件使用回调 function。 这是一个示例助手 function 这样做。

//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=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('body');
});