Performance

SDKLegacyLast updated: June 20th 2023, @ 6:44:12 pm

Learn how to optimize loading the PayPal script and rendering the buttons for the best performance.

Script tag

Load the PayPal script from https://www.paypal.com/sdk/js only. Reasons include:

The script is dynamically bundled, based on your client ID and on the current buyer. It includes only the specific code, images, localization, and other resources needed and does not slow down your page with unnecessary code. This approach is not possible with a statically distributed script.
The script also loads inside the button iframe and Checkout popup window to communicate with the parent window. Loading from paypal.com means your users' browsers cache the script and there is no need to download the script again inside the iframe or popup.
Security updates and bug fixes are instantly available to your users.
Conversion updates to drive extra sales and revenue through PayPal are instantly available.
Backwards compatibility with previous versions of the script is guaranteed.

Minified script

The script is minified by default. To disable this for development purposes only, add debug=true to the script URL.

Instant render

If you are rendering the PayPal button immediately on the page after it loads, you should:

Load the PayPal script prior to the element you want to render into:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID"></script>

Call paypal.Buttons().render('#container') as soon as possible when the container element is ready:

<div id="paypal-button-container"></div>

<script>
  paypal.Buttons().render('#paypal-button-container')
</script>

For a bonus performance boost, load the PayPal script asynchronously on a page that precedes the Checkout page. This approach pre-caches the script, making future loads/renders instantaneous:
```

<body>
  <script
    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID" async>
  </script>
</body>
```

Delayed render

If your app renders on the client-side, or there is a user action on the page that triggers displaying the PayPal button (like opening a cart or selecting a radio button), you should:

Load the PayPal script asynchronously in your page:

<head>
  <script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID"></script>
</head>

Alternatively, use JavaScript to asynchronously load the script:

  var PAYPAL_SCRIPT = 'https://www.paypal.com/sdk/js?client-id=CLIENT_ID';
  var script = document.createElement('script');
  script.setAttribute('src', PAYPAL_SCRIPT);
  document.head.appendChild(script);

Call paypal.Buttons().render('#container') on the client-side render, route-change, or user action that you want to trigger displaying the button:

<div id="paypal-button-container"></div>

<script>
   document.querySelector('#myRadioField')
     .addEventListener('click', function() {
       paypal.Buttons().render('#paypal-button-container')
     });
</script>

Alternatively, to ensure the button completely loads by the time it displays, render the button in advance in a hidden container, and display it on the page-change or user action:

<div id="paypal-button-container"></div>

<script>
   document.querySelector('#paypal-button-container')
     .style.display = 'none';

   paypal.Buttons().render('#paypal-button-container');

   document.querySelector('#myRadioField')
     .addEventListener('click', function() {
       document.querySelector('#paypal-button-container')
         .style.display = 'block';
     });
</script>