如何在 React 中渲染 Adyen 的支付字段？答案

【问题标题】：How to render the payment fields of Adyen in React?如何在 React 中渲染 Adyen 的支付字段？
【发布时间】：2019-05-08 14:02:06
【问题描述】：

我正在尝试在我的（创建）React 应用程序中使用 Adyen 支付服务，但无法生成输入字段，因为它找不到 rootNode。

我尝试过的：
从 Adyen 我必须在我的项目中加载他们的结帐脚本。所以我创建了一个<script>动态标签（document.createElement('script')）并在下面加载的正文中（document.body.appendChild(script)）。这行得通。

接下来我必须从 Adyen 调用一个方法，该方法将对象作为参数，最终将填充 div。

问题：
这个 <div className="cards-div"> 我已添加到我的 React 组件中，但出现此错误：
index.js:1446 ERROR: SecuredFields cannot find a valid rootNode element

好像看不到创建的div。有谁知道我如何填写这些（信用卡）字段或知道使用 React 和 Adyen 的最佳方式是什么？

更新：

解决方案：我找到了一个对我有用的解决方案，希望也对你有用。在我在组件的初始渲染上调用 Adyen 服务之前。因为需要一点时间，所以我创建了一个单独的函数，需要调用它来触发服务

【问题讨论】：

【解决方案1】：

这通常是因为 adyen js 在 dom 元素创建之前运行。确保在#cards-div元素在dom中之后调用.csf()？

【讨论】：

我使用的不是 SDK，而是没有 .mount() 的 API 集成。现在我通过在稍后创建并存在<div className="cards-div"> 时触发.csf() 来解决它
啊，.csf() 是我应该说的。已更新。