处理 CORS Error/Invalid Adyen Web Drop-In 的客户端密钥

Question

我正在尝试实施端到端的概念验证来练习 Adyen's Web Drop-In。粗略地说，这涉及三个步骤，如 URL 所示，但为方便起见在此重复：

创建付款会话
设置 Drop-in
获取付款结果

第一步在服务器端完成，session数据返回给浏览器。那部分工作正常。第 2 步必须在浏览器中完成，因为它需要 DOM，这（自然）是 CORS 问题出现的地方。这是有问题的代码：

      const configuration = {
        environment: "test",
        clientKey: "test_APV***...",
        session: {
          id: uuidv4(),
          sessionData: "Ab02b4c0!BQABAgBdJVhguRV6hEN..."
        },
        onPaymentCompleted: (result, component) => {
            console.info(result, component);
        },
        onError: (error, component) => {
            console.error(error.name, error.message, error.stack, component);
        }
      };

      AdyenCheckout(configuration)
      .then(checkout => {
        const dropinComponent = checkout.create('dropin').mount('#dropin-container');
      })
      .catch(error => {
        console.error('Creating Adyen Checkout: ', error.message)
      })
    }

行 AdyenCheckout(configuration) 失败，将执行线程放入 onError 处理程序。在浏览器控制台中可以看到两个错误：

一个标准的 CORS 错误，来自 Adyen 的 javascript 库的深处
NETWORK_ERROR：错误：无效的客户端密钥

Adyen's documentation 允许像这样嵌入 JS

<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.js"
     integrity="sha384-LoKEanRPljHoEsT5o+grBn8hgVzoPevwGvRd+gOp/2Xgc4Jx2FQkx29092SKDdeY"
     crossorigin="anonymous"></script>

我的理解是“完整性”和“crossorigin”属性允许跨源请求...但这似乎不起作用。

“无效的 ClientKey”错误也令人费解：我确定我使用的 ClientKey 是有效的，并且与我用来生成会话数据的 API 密钥关联的是同一个.

希望有人有使用 Adyen 的 Web Drop-In 的经验，并且可以阐明我做错了什么。如果我自己解决了这个问题，我会报告。

Answer 1

最有可能发生的情况是您没有将应用程序的 URL 添加到您凭据的“允许来源”列表中。

您可以转到 the customer area 的开发人员 -> API 凭据页面，在那里选择正确的凭据并添加新的“允许的来源”。

这应该可以解决您的 CORS 问题

处理 CORS Error/Invalid Adyen Web Drop-In 的客户端密钥

Dealing With CORS Error/Invalid Client Key For Adyen's Web Drop-In

cors

adyen