adyen 支付挂载在 reactjs 中不起作用答案

【问题标题】：adyen payment mount is not working inside reactjsadyen 支付挂载在 reactjs 中不起作用
【发布时间】：2019-08-20 10:23:51
【问题描述】：

以下代码未呈现 html。我猜 .mount 不会在 test-container 类中重新渲染 html。

componentDidMount() {
     const originKey = getOriginKey(this.props.subscriptionInfo);
     const checkout = new window.AdyenCheckout({
     locale: 'en-US',
     originKey,
     loadingContext: 'https://checkoutshopper 
  test.adyen.com/checkoutshopper/',
  onChange: function() {},
  onError: console.error
});

console.log(checkout);

window.securedFields = checkout
  .create('securedfields', {
  type: 'card',
  groupTypes: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
  allowedDOMAccess: false, // Whether encrypted blobs will be added to the DOM. OPTIONAL - defaults to false
  autoFocus: true,
  onFieldValid,
  onConfigSuccess,
  onAllValid,
  onError
})
.mount('.test-container');
}

【问题讨论】：

嗨@kulls，你能补充更多关于这个的信息吗？控制台中是否有任何错误？ “.test-container”HTML 里面有什么？您是否有类似this page 步骤 2 中的表格？你看到一个微调器还是什么都没有？另外，您确定在创建AdyenCheckout 的实例时检索了originKey 吗？另一件要尝试的事情是在安装安全字段时使用参考而不是选择器。干杯，

标签： html reactjs adyen

【解决方案1】：

.mount 方法将 iframe 附加到现有表单字段。在安全字段组件的情况下，它将 iframe 安装到您传递给 .mount 方法的节点内的元素（它在内部使用 document.querySelector）。

这或多或少是来自docs 的结构。

根据我的经验，它适用于任何具有正确 data-cse 属性的元素。只需将这些元素放入您的渲染 fn 并安装 Adyen 结帐即可。

【讨论】：