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¤cy=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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.