javascript - 如何根据环境渲染Paypal Smart Button？

Question

我可以使用实时客户端 ID 在我的站点中添加 paypal 按钮并且一切正常，但是出于开发目的，我在本地测试时使用我的沙箱客户端 ID，这意味着始终更改 src 中的客户端 ID:

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

我创建了一个 js 文件，它根据网站运行的环境加载不同的脚本文件 -

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);

但是 paypal 智能按钮在呈现时非常不一致，因为它在 7/8 次中有 1 次起作用。有没有一种稳定的动态加载脚本的方法？

Answer 1

您的代码看起来好像可以工作，我认为您已经为这种基于 URL 的动态环境加载创建了正确的 hack，尽管我以前从未见过这样做。通常人们以更慢的速度在环境之间切换，最多一天几次，所以在页面顶部注释掉和取消注释两行，即:

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

..对于我到目前为止观察到的所有开发用例来说已经足够了。

---

如果没有更多数据，就无法研究“7/8 次中有 1 次有效”的问题，例如我们可以测试和重现的完整可运行代码段