处理 Adyen Web Drop-In 的 CORS 错误/无效客户端密钥

Question

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

1. 创建支付会话
2. 设置插入
3. 获取支付结果

步骤1在服务器上完成，会话数据返回到浏览器。那部分工作正常。第 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。在浏览器控制台中可以看到两个错误：

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

Adyen 的文档允许像这样嵌入 JS

      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)
      })
    }

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

“无效的 ClientKey”错误也令人费解：我确信我使用的 ClientKey 是有效的，并且与我用来生成会话数据的 API 密钥关联的客户端密钥相同。

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

Answer 1

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

您可以通过转到客户区域的开发人员 -> API 凭证页面，选择正确的凭证并添加新的“允许来源”来完成此操作。

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