如何根據環境呈現貝寶智能按鈕？

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 次”的問題，就像我們可以測試和重現的完整可運行代碼段一樣