title: How to render Paypal Smart Button based on environment?
body: <p>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:</p>
  
  <pre><code>&lt;script src="https://www.paypal.com/sdk/js?client-id=AYw0JC4IjiptK8Dyv--SPi98ze5My9hgTOmD_ckO8u197I56tpOtinZAu7p2flNCPGk5ZezoYSNS-U4Z&amp;currency=GBP&amp;disable-funding=credit,card"&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>I created a js file which loads different script files depending on the environment the site is being run on -</p>
  
  <pre><code>const LOCAL_DOMAINS = ["localhost", "127.0.0.1", ""];
  
  var paypalTestScript = 'https://www.paypal.com/sdk/js?client-id=AXQBIcWjoGGdwc1GXUtX9fx7o_U3lUIcmShJCa7FcJYX8MVOXa20yy1M7FgLdHPmEsWmU30ChP1X9xJJ&amp;vault=true&amp;currency=GBP&amp;disable-funding=credit,card';
  var paypalLiveScript = 'https://www.paypal.com/sdk/js?client-id=AYw0JC4IjiptK8Dyv--SPi98ze5My9hgTOmD_ckO8u197I56tpOtinZAu7p2flNCPGk5ZezoYSNS-U4Z&amp;vault=true&amp;currency=GBP&amp;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);
  </code></pre>
  
  <p>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?</p>