我是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。我确信这很简单，我做错了，因此，如果有人可以帮助，将不胜感激。
请帮忙！
最佳答案
这里发生的是您正在尝试在实际加载脚本之前启动AdyenCheckout。
这些情况下最简单的解决方案是在HTML文档中添加脚本标签。这样，脚本将在启动React App之前加载。
话虽如此，由于您只会在特定部分中使用脚本，因此在React应用程序中添加script标签确实有意义。
要解决此问题，只需将与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() {
// ...
在这里，您有一个working example。
干杯!