[FIXED] How to render the paypal smart buttons through code?

Issue

This is the code to render the paypal smart buttons:

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

But I want to render them through code, so I tried to do this:

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

But it didn't work, how do I achieve this?

Solution

Adding script elements to the DOM will cause them to load asynchronously, not in time for code that immediately follows to make use of them. You need to use a callback function for the script's onload event. Here is an example helper function that does so.

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

Answered By - Preston PHX

Answer Checked By - Terry (PHPFixing Volunteer)