How to know if PayPal Smart Payment Button has finished rendering

Question

I'm trying to add the PayPal Smart Payment button to my website . The HTML container for rendering the button is received through an AJAX request with the paypal.Buttons.render() method called onsuccess of the AJAX request. Now everything works well, except the button takes some time render on the site and become active. I'd like to hint my users that the button is rendering or loading, so they don't stay in the dark when the AJAX request returns and no button is shown. Is there a way to know when the button has completely rendered?

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

You can use .then(callback) since the render() returns a Promise.

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

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them.

Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

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

There are a few suggested ways to optimize rendering the button here: https://developer.paypal.com/docs/checkout/troubleshoot/performance/

What data are you fetching via Ajax?

If you are waiting for some condition before showing the button, pre-render the container and buttons hidden, then display them upon successful callback.

Alternatively, if the button is loaded as an iframe - in that case wrap it in a div then just use css to specify a loading gif as background image on the iframe.

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