加載 PayPal JS SDK 並渲染智能按鈕 onclick/onmouseover

Question

我想使用 Paypal 的智能按鈕，因為卡支付也作為一個選項插入，並且訪問者/客戶無需離開我的頁面即可購買。 使用 Pp 代碼工作正常，但我更喜歡加載外部 javascript 並在單擊或鼠標懸停時呈現按鈕，主要是為了速度和 SEO 目的。 據我所知，以下應該有效：

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

慘遭失敗，錯誤消息為“Uncaught ReferenceError: paypal is not defined”。 您可以在上面看到錯誤發生的位置。

請幫忙。 我也在使用 jQuery，因此任何有效的 jQuery 解決方案都將受到贊賞。

我試過渲染（'#paypal-button-container'）上方的 append sdk js，它沒有用。 我還嘗試讓 onclick 觸發 2 個函數，一個用於加載 sdk，第二個用於呈現按鈕......仍然沒有用。

好的，稍后....我能想到的最好的是有 2 個功能：1 個將加載外部 sdk，一個將呈現按鈕，然后將 2 個 onclick 事件添加到 Pay by Paypal 鏈接：

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

這似乎可行，盡管 3 秒的延遲有點煩人。 由於 sdk 未完全加載，比這更短可能會觸發另一個錯誤。 當然還有其他更好的方法嗎？ 有任何想法嗎？

Answer 1

在 PayPal JS SDK 腳本完成加載后，您需要一個onload回調 function 來調用 paypal.Buttons。 這是一個 loadAsync 幫助程序 function 用於此...

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

---

我不一定贊同你只加載 JS SDK onclick/onmouseover 的想法； 如果您在頁面加載時將按鈕渲染到style="display:none;"的容器 div，按鈕會顯示得更快 ，然后讓您的 onclick/onmouseover 使用$('#paypal-button-container').show(); 或類似的