尝试在页面上加载sdk版本5.0.343（Paypal错误）

Question

我在这里想做的就是能够从后端 api 获取 paypal_api_key ，例如：

app.get("/api/keys/paypal", (req, res) => {
  res.send(process.env.PAYPAL_CLIENT_ID || "sb");
});

前端侧：

const loadPaypalScript = async () => {
        const { data: clientId } = await axios.get("/api/keys/paypal", {
          headers: { authorization: `Bearer ${userInfo.token}` },
        });
        paypalDispatch({
          type: "resetOptions",
          value: {
            "client-id": clientId,
            currency: "GBP",
          },
        });
       paypalDispatch({ type: "setLoadingStatus", value: "pending" });
      };

      loadPaypalScript();

错误：

 Uncaught Error: Attempted to load sdk version 5.0.343 on page, but window.paypal at version undefined already loaded.

To load this sdk alongside the existing version, please specify a different namespace in the script tag, e.g. <script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID" data-namespace="paypal_sdk"></script>, then use the paypal_sdk namespace in place of paypal in your code.
    at VM827 js:2
    at Module.<anonymous> (VM827 js:2)
    at t (VM827 js:2)
    at VM827 js:2
    at VM827 js:2

我试过这个

 <script src="https://www.paypal.com/sdk/js?client-id=***"></script>

它有效，但我对像这样在众目睽睽之下传递我的 api 密钥不感兴趣

Answer 1

id="paypal"对我来说，发生这种情况是因为页面上有一个 HTML 元素（由于 SVG 图标精灵）。将元素重命名为其他名称解决了问题。

参考：https://www.paypal-community.com/t5/Merchant-Products-and-Services/Smart-Payment-Buttons-Problem/mp/1892006