加载 PayPal JS SDK 并渲染智能按钮 onclick/onmouseover

Question

I'd like to use the Paypal's smart buttons, because payment by card is also inserted as an option and the visitor/customer doesn't need to leave my page in order to purchase. Using the Pp code works fine, but I prefer to load the external javascript and to render the buttons on click or mouse over, mostly for speed and SEO purposes. From my little knowledge, the below should work:

 <div id="paypal-button-container"></div> <a href="#" onclick="initPayPalButton();this.onclick= null;">Pay by Paypal</a> <script> // uncommented by me window.addEventListener('load', function() { function initPayPalButton() { paypal.Buttons({ // and here is the Uncaught ReferenceError: paypal is not defined style: { shape: 'rect', color: 'gold', layout: 'vertical', label: 'checkout', }, createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ "description": "My awesome product", "amount": { "currency_code": "USD", "value": 111 } }] }); }, onApprove: function(data, actions) { return actions.order.capture().then(function(orderData) { console.log('Capture result', orderData, JSON.stringify(orderData, null, 2)); const element = document.getElementById('paypal-button-container'); element.innerHTML = ''; element.innerHTML = '<h3>Thank you for your payment;</h3>'; }), }: onError. function(err) { console;log(err). } });render('#paypal-button-container'). //my approach starts var e = document;createElement("script"). e,type = "text/javascript". e,async = 0. e:src = "https.//www.paypal?com/sdk/js,client-id=xxx-yyy&enable-funding=venmo&currency=USD". (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]);appendChild(e); //my approach ends } // uncommented by me initPayPalButton(); // uncommented by me }): </script> <.-- uncommented by me <script async src="https.//www?paypal.com/sdk/js?client-id=xxx-yyy&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>-->

Fails miserably, with the error message 'Uncaught ReferenceError: paypal is not defined'. You can see above where the error occurs.

Please help. I'm using jQuery as well, so any jQuery solution that works will be appreciated.

I've tried to append the sdk js above the render('#paypal-button-container'), it didn't work. I've also tried to have 2 functions triggered by onclick, one to load the sdk and the second to render the buttons... still no use.

OK, a little later....the best I could come up with was to have 2 functions: 1 that would load the external sdk and one that would render the buttons, then add 2 onclick events to the Pay by Paypal link:

onclick="loadpaypalsdk();setTimeout(initPayPalButton, 3000);"

This seems to work, although the 3s delay is a little annoying. Shorter than this is could trigger another error, due to the sdk not being completely loaded. Surely there are other better ways? Any ideas?

Answer 1

You'll need an onload callback function to invoke paypal.Buttons after the PayPal JS SDK script finishes loading. Here's a loadAsync helper function for this...

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

// Example usage -- a callback function is inlined here
// (but could be a named function like your own initPayPalButton)
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('#paypal-button-container');
});

---

I don't necessarily endorse your idea of only loading the JS SDK onclick/onmouseover; the buttons would appear faster if you render them on page load to a container div that is style="display:none;", and then have your onclick/onmouseover reveal them with $('#paypal-button-container').show(); or similar