2

I'm able to add the paypal button in my site with live client id and it works all good, however for development purposes I use my sandbox client id when testing locally and this means always changing the client id in the src:

<script src="https://www.paypal.com/sdk/js?client-id=AYw0JC4IjiptK8Dyv--SPi98ze5My9hgTOmD_ckO8u197I56tpOtinZAu7p2flNCPGk5ZezoYSNS-U4Z&currency=GBP&disable-funding=credit,card">
    </script>

I created a js file which loads different script files depending on the environment the site is being run on -

const LOCAL_DOMAINS = ["localhost", "127.0.0.1", ""];

var paypalTestScript = 'https://www.paypal.com/sdk/js?client-id=AXQBIcWjoGGdwc1GXUtX9fx7o_U3lUIcmShJCa7FcJYX8MVOXa20yy1M7FgLdHPmEsWmU30ChP1X9xJJ&vault=true&currency=GBP&disable-funding=credit,card';
var paypalLiveScript = 'https://www.paypal.com/sdk/js?client-id=AYw0JC4IjiptK8Dyv--SPi98ze5My9hgTOmD_ckO8u197I56tpOtinZAu7p2flNCPGk5ZezoYSNS-U4Z&vault=true&currency=GBP&disable-funding=credit,card';

var paypalScriptToUse = "";
if (LOCAL_DOMAINS.includes(window.location.hostname)) {
    paypalScriptToUse = paypalTestScript;
} else {
    paypalScriptToUse = paypalLiveScript;
}

var script = document.createElement('script');
script.setAttribute('src', paypalScriptToUse);
document.head.appendChild(script);

Yet the paypal smart button is being very inconsistent in rendering as it works 1 out of 7/8 times. Is there a stable way of loading the scripts dynamically?

Preston PHX
  • 15,348
  • 3
  • 16
  • 35
Legacy07
  • 43
  • 2

1 Answers1

0

Your code appears as though it'll work, I think you've created the right sort of hack for this sort of dynamic environment loading based on URL, although I've never seen this done before. Typically people switch between environments at a much slower rate, perhpas a few times a day at most, so commenting out and uncommenting two lines at the top of the page, i.e.:

    <script>for sandbox...(currently uncommented)</script>
<!--
    <script>for live...(currently commented out)</script>
-->

..has been sufficient for all the development use cases I've observed up til now.

Your issue of "it works 1 out of 7/8 times" can't be looked into without more data, like a full runnable snippet we can test and reproduce the same with

Preston PHX
  • 15,348
  • 3
  • 16
  • 35
  • Thanks, but if you need to with a runnable snippet, you can create add this in a seperate js file `paypal.Buttons().render('#paypal-button-container');` Also add this line in a html file `
    ` Then add the snippet above in a seperate js file then load both in html and you could reproduce the same problem.     – Legacy07 Jan 05 '20 at 19:40
  • Well is your paypal.Buttons().render() call not waiting for the document.head.appendChild() and loading of the PayPal script to finish? That could be your issue. Which is why we needed a full example to test – Preston PHX Jan 06 '20 at 23:16
  • Yeah i see, however i would expect my paypal.Buttons().render() function to be called after document.head.appendChild() as the script is added right at the top. – Legacy07 Jan 08 '20 at 22:31
  • 1
    It takes time to append a new DOM element and fully load all the elements that come with the paypal JS you are appending in that tag. Meanwhile your document's JS keeps executing... – Preston PHX Jan 08 '20 at 22:52
  • 1
    Putting your button render in something like this might help: https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery – Preston PHX Jan 08 '20 at 22:54