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..."
}

Chivy

There are a few suggested ways to optimize rendering the button here: developer.paypal.com/docs/checkout/troubleshoot/performance What data are you fetching via Ajax? – Mazur

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..."
  });

}

Alacrity

This doesn't wait for debit card option to load which still makes any of the buttons unclickable. Here is an example: streamable.com/j6fw4e – Lansing

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;
}```

Mazur

Can't place the button in a hidden div because it needs pre-configured items like amount to be able to render. The iFrame solution seems better, even though a little more complex than should be, because it has to handle the success/failure callback before returning to the parent window. – Chivy