如何根据环境渲染 Paypal Smart Button？答案

【问题标题】：How to render Paypal Smart Button based on environment?如何根据环境渲染 Paypal Smart Button？
【发布时间】：2020-04-21 14:14:21
【问题描述】：

我可以使用实时客户端 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 次。有没有稳定的动态加载脚本的方法？

【问题讨论】：

标签： javascript paypal paypal-sandbox

【解决方案1】：

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

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

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

如果没有更多数据，就无法调查您的“7/8 次中有 1 次有效”的问题，例如我们可以测试和重现相同的完整可运行 sn-p

【讨论】：

谢谢，但是如果你需要一个可运行的sn-p，你可以创建在一个单独的js文件中添加这个paypal.Buttons().render('#paypal-button-container');在一个html文件中添加这一行<div id="paypal-button-container"></div>然后添加sn -p 在单独的 js 文件中，然后在 html 中加载两者，您可以重现相同的问题。
那么您的 paypal.Buttons().render() 调用是否没有等待 document.head.appendChild() 和 PayPal 脚本的加载完成？那可能是你的问题。这就是为什么我们需要一个完整的例子来测试
是的，我明白了，但是我希望我的 paypal.Buttons().render() 函数在 document.head.appendChild() 之后被调用，因为脚本被添加到顶部。跨度>
附加一个新的 DOM 元素并完全加载您在该标签中附加的 paypal JS 附带的所有元素需要时间。同时你的文档的 JS 一直在执行...
把你的按钮渲染成这样可能会有所帮助：stackoverflow.com/questions/799981/…