如何根据环境渲染PayPal智能按钮?

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 的动态环境加载创建了正确的技巧，尽管我以前从未见过这样做。通常，人们在环境之间的切换速度要慢得多，可能最多一天几次，因此在页面顶部注释掉和取消注释两行，即：

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

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

---

如果没有更多数据，就无法调查您的"它在 1/7 次中工作 8 次"的问题，例如我们可以测试和重现的完整可运行片段