Paypal-checkout-components: Issue in Rendering Paypal Button.

[Soulpancake000]

Yes, the Issue is still there.
The button is not getting render.

_Originally posted by @Soulpancake000 in https://github.com/paypal/paypal-checkout-components/issues/1290#issuecomment-676133856_

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label 🐞 bug to this issue, with a confidence of 0.95. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[gregjopa]

@Soulpancake000 thanks for creating the issue. It's hard to help troubleshoot the problem with only the screenshot you provided. Can you share a reproduction? Or a code snippet of your implementation?

[Soulpancake000]

Actually, I am implementing Paypal smart button on ServiceNow Portal. I am loading below Paypal SDK on load--
https://www.paypal.com/sdk/js?client-id=Client-ID&disable-funding=card

`

`

Surprisingly, Paypal smart button is rendering in one of my chrome browsers.

[gregjopa]

Hi @Soulpancake000, I tested out your code snippet and it ran successfully for me 🤔. My guess is the ServiceNow Portal integration is loading the sdk script async and paypal.Buttons().render() is being executed before the JS SDK script has finished loading causing the error. Can you try waiting for the onload event before rendering?

<div id="paypal-button-container"></div>
<script async src="https://www.paypal.com/sdk/js?client-id=sb&disable-funding=card"></script>
<script>
  // wait for on load event to ensure the JS SDK is loaded
  window.addEventListener('load', (event) => {
    var options = {
      createOrder: function(data, actions) {
        // This function sets up the details of the transaction, including the amount and line item details. 
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: '0.01'
            }
          }]
        });
      },
      onApprove: function(data, actions) {
        // This function captures the funds from the transaction. 
        return actions.order.capture().then(function(details) {
          // This function shows a transaction success message to your buyer. 
          alert('Transaction completed by ' + details.payer.name.given_name);
        })
      }
    };
    // This function displays Smart Payment Buttons on your web page. 
    window.paypal.Buttons(options).render('#paypal-button-container');
  });
</script>

[Soulpancake000]

Thank you, its working fine now.