adyen - Adyen 创建 dropin 失败并显示“无法读取 null 属性（正在读取 'dropin'）”

Question

尝试做一个简单的 Adyen Drop-in 功能的初始工作示例。我在 React 应用程序中使用包“@adyen/adyen-web”版本 5.2.0。（见附件代码）

我的后端 API 内置在 .Net5 中，调用 Adyen 创建会话并将 id 和 sessionData 正确返回到“paymentSession”中显示的前端。

但是当代码到达部分 checkout.create('dropin').mount(adyenElementRef.current) 时，它在浏览器控制台中失败并出现错误：“无法读取 null 的属性（正在读取 'dropin'）”。

我不知道为什么，我遵循了https://docs.adyen.com/online-payments/web-drop-in上的确切文档

更新： 我降级到版本 4.1.0 并通过更改为以下代码使其全部工作：

const checkout = new AdyenCheckout(adyenConfig)
            // Create an instance of Drop-in and mount it to the container you created.
            const dropinComponent = checkout.create('dropin').mount(adyenElementRef.current)

最新版本和 Promise 实现有什么奇怪的吗？

Answer 1

我无法真正准确地复制您的示例，但我在您的评论中看到版本 4.x 似乎正在运行。

在 5.0 版中，创建AdyenCheckout现在是异步的。你能确定这不是问题的根源吗？

//version 4
const checkout = await AdyenCheckout(configuration);
// version 5
const checkout = AdyenCheckout(configuration); 

请参阅发行说明。

如果您今天正在集成，我建议使用最新版本的集成，它有很多新的好东西。