0

我是 Adyen 的新手，对 Javascript 和 REACT 比较陌生。我正在尝试在 REACT 中使用 Adyen dropin 组件，但无法创建新的 AdyenCheckout 组件。

我使用以下代码在 componentDidMount 中加载了 Adyen Javascript：

const script = document.createElement("script");
script.src = "https://checkoutshopper- 
test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js";
script.async = true;
document.body.appendChild(script);

我正在尝试使用以下代码创建 AdyenCheckout 组件：

const configuration = {
locale: "en_US",
environment: "test",
originKey: "YOUR_ORIGIN_KEY",
paymentMethodsResponse: this.state.paymentMethodsResponse,
};

const checkout = new AdyenCheckout(configuration);
const dropin = checkout
    .create('dropin', {
        onSubmit: (state, dropin) => {
        },
        onAdditionalDetails: (state, dropin) => {
        }
    })
.mount('#dropin');`

或者，通过更改 new AdyenCheckout(configuration) 为new window.AdyenCheckout(configuration)，

因为人们过去似乎在这种语法上取得了成功。

使用new AdyenCheckout(configuration)

，我得到错误AdyenCheckout is not defined。

使用new window.AdyenCheckout(configuration)

，我得到错误TypeError: window.AdyenCheckout is not a constructor。

我敢肯定这是一件很简单的事情，我做错了，所以如果有人可以提供帮助，我们将不胜感激。

请帮忙！

4

2 回答 2

2

这里发生的事情是您试图在实际加载脚本之前启动 AdyenCheckout。

对于这些情况，最简单的解决方案是在 HTML 文档中添加脚本标记。这样脚本将在 React App 启动之前加载。

话虽如此，由于您只会在特定部分中使用脚本，因此在您的 React 应用程序中添加脚本标签确实有意义。

要解决此问题，只需将与 AdyenCheckout 相关的所有功能移至加载脚本后调用的方法：

class AdyenDropin extends Component {
  constructor(props) {
    super(props);
    this.initAdyenCheckout = this.initAdyenCheckout.bind(this);
  }

  componentDidMount() {
    const script = document.createElement("script");
    script.src =
      "https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js";
    script.onload = this.initAdyenCheckout; // Wait until the script is loaded before initiating AdyenCheckout
    document.body.appendChild(script);
  }

  initAdyenCheckout() {
    // ...

这里有一个工作示例。

干杯!

于 2019-07-11T11:39:07.810 回答
0

用于componentDidMount初始化 AdyenCheckout 对象，因为它可以访问 DOM。


class AdyenDropin extends Component {
  contructor(props){
    this.checkout = {};
  }

  componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.0.0/adyen.js";
    script.async = true;
    document.body.appendChild(script);
    
    const configuration = {
      locale: "en_US",
      environment: "test",
      originKey: "YOUR_ORIGIN_KEY",
      paymentMethodsResponse: this.state.paymentMethodsResponse,
    };

    const checkout = new AdyenCheckout(configuration);
    const dropin = checkout
      .create('dropin', {
        onSubmit: (state, dropin) => {
        },
        onAdditionalDetails: (state, dropin) => {
        }
      })
      .mount('#dropin');`
    }
  }
  
  render(){
    return <div id="dropin"></div>
  }
}
于 2019-07-10T19:09:08.177 回答