html - adyen 支付挂载在 reactjs 中不起作用

Question

以下代码未呈现 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');
}

Answer 1

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

这或多或少是docs的结构。

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