[Vuejs]-Placing PayPal buttons inside Vue.js component

by

0👍

Try this from mounted(), see if either using a callback once the PayPal JS is loaded or the client-side createOrder/onApprove make a difference

function loadAsync(url, callback) {
  var s = document.createElement('script');
  s.setAttribute('src', url); s.onload = callback;
  document.head.insertBefore(s, document.head.firstElementChild);
}

loadAsync('https://www.paypal.com/sdk/js?client-id=sb&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) {
            // Show a success message to the buyer
            alert('Transaction completed by ' + details.payer.name.given_name);
        });
    }

  }).render('#paypal-button-container');
});

As far as the actual client-side approval code to go ahead and pair with your server backend, I recommend the error handling of https://developer.paypal.com/demo/checkout/#/pattern/server

Leave a comment