如何知道 PayPal 智能支付按鈕是否已完成渲染

Question

我正在嘗試將 PayPal Smart Payment 按鈕添加到我的網站。 用於再現按鈕的HTML容器通過與一個AJAX請求接收paypal.Buttons.render()調用的方法onsuccess AJAX請求的。 現在一切正常，除了按鈕需要一些時間在網站上呈現並變為活動狀態。 我想提示我的用戶按鈕正在呈現或加載，所以當 AJAX 請求返回並且沒有顯示按鈕時，他們不會留在黑暗中。 有沒有辦法知道按鈕何時完全呈現？

$.ajax({
  url: example/foler,
  data: data,
  success: success(data)
});

function success(data) {
  // data = <div id='paypal-button-container'></div>
  paypal.Buttons().render('#paypal-button-container');

  // Display "Button Loading..."
  // Find out if button has completely rendered, then turn off "button loading..."
}

Answer 1

您可以使用 .then(callback) 因為 render() 返回一個 Promise。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Promise 是表示異步操作最終完成或失敗的對象。 由於大多數人都是已經創建的 Promise 的消費者，本指南將在解釋如何創建它們之前解釋返回的 Promise 的消費。

本質上，promise 是一個返回的對象，您可以將回調附加到該對象上，而不是將回調傳遞給函數。

$.ajax({
  url: example/foler,
  data: data,
  success: success(data)
});

function success(data) {
  // data = <div id='paypal-button-container'></div>
  // Display "Button Loading..."
  paypal.Buttons().render('#paypal-button-container').then(function() { 
    // Button has completely rendered, then turn off "button loading..."
  });

}

Answer 2

這里有一些優化按鈕渲染的建議方法： https : //developer.paypal.com/docs/checkout/troubleshoot/performance/

您通過 Ajax 獲取哪些數據？

如果您在顯示按鈕之前等待某些條件，請預渲染容器和按鈕隱藏，然后在成功回調時顯示它們。

或者，如果按鈕作為 iframe 加載 - 在這種情況下，請將其包裝在 div 中，然后只需使用 css 將加載 gif 指定為 iframe 上的背景圖像。

div.button-wrapper-div {
  background:url(../images/loader.gif) center center no-repeat;
}```