How to render the paypal smart buttons through code?

Question

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?

Answer 1

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({

  // createOrder & onApprove go here and should fetch from a backend
  // do not use actions.order.create or actions.order.capture,
  // they are deprecated and will be sunset

  }).render('body');
});