Javascript Adyencheckout不是构造函数-NextJS
我正在尝试使用NextJS实现Adyen dropin支付UI，但初始化Adyen dropin组件时遇到问题 我需要动态导入Adyen web，否则我会发现错误窗口未定义然而，在阅读了NextJS文档后，动态导入创建了一个组件，我不知道如何将其用作构造函数 我尝试了下面的代码，但收到错误TypeError:AdyenCheckout不是构造函数 我是NextJS的新手，对于如何导入和初始化Adyen完全不知所措 谁能给我指出正确的方向吗Javascript Adyencheckout不是构造函数-NextJS,javascript,reactjs,next.js,adyen,Javascript,Reactjs,Next.js,Adyen,我正在尝试使用NextJS实现Adyen dropin支付UI，但初始化Adyen dropin组件时遇到问题 我需要动态导入Adyen web，否则我会发现错误窗口未定义然而，在阅读了NextJS文档后，动态导入创建了一个组件，我不知道如何将其用作构造函数 我尝试了下面的代码，但收到错误TypeError:AdyenCheckout不是构造函数 我是NextJS的新手，对于如何导入和初始化Adyen完全不知所措 谁能给我指出正确的方向吗 import Head from 'next/head'
import Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
//dynamic import below. Imports as a component
//import dynamic from 'next/dynamic';
//const AdyenCheckout = dynamic(() => import('@adyen/adyen-web'), {ssr: false});
import '@adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef(null);
const [paymentMethods, setPaymentMethods] = useState();
//const [dropinHolder, setDropinHolder] = useState();
//Get payment methods after page render
useEffect( async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`);
setPaymentMethods(prev => prev = response);
},[]);
//Adyen config object to be passed to AdyenCheckout
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
//const checkout = new AdyenCheckout(configuration);
const AdyenCheckout = import('@adyen/adyen-web').default;
const adyenCheckout = new AdyenCheckout(configuration);
const dropin = adyenCheckout.create('dropin').mount(dropinContainer.current);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropin}></div>
</div>
)
}
从“下一个/Head”导入Head；
从“react”导入{useRef，useffect，useState}；
从“../util/serverHelpers”导入{callServer，handleSubmission}；
//下面是动态导入。作为组件导入
//从“下一个/动态”导入动态；
//const AdyenCheckout=dynamic（（）=>import（'@adyen/adyen-web'），{ssr:false}）；
导入“@adyen/adyenweb/dist/adyen.css”；
导出默认函数Dropin（）{
const dropinContainer=useRef（null）；
const[paymentMethods，setPaymentMethods]=useState（）；
//const[drophinholder，setdrophinholder]=useState（）；
//获取页面呈现后的付款方式
useffect（异步（）=>{
const response=await callServer（`${process.env.BASE_URL}/api/getPaymentMethods`）；
setPaymentMethods（prev=>prev=响应）；
},[]);
//要传递给AdyenCheckout的Adyen配置对象
常量配置={
付款方式响应：付款方式，
clientKey:process.env.CLIENT_KEY，
地点：“恩欧”，
环境：“测试”，
付款方式配置：{
卡片：{
showPayButton：是的，
哈索德纳姆：没错，
holderNameRequired：是的，
名称：“信用卡或借记卡”，
金额：{
价值：2000年，
货币：“澳元”
}
}
},
onSubmit：（状态、组件）=>{
if（state.isValid）{
handleSubmission（状态、组件，“/api/initiatePayment”）；
}
},
onAdditionalDetails：（状态、组件）=>{
handleSubmission（状态、组件，“/api/submitAdditionalDetails”）；
},
};
//const checkout=新的AdyenCheckout（配置）；
const AdyenCheckout=import（'@adyen/adyen-web'）。默认值；
const adyenCheckout=新adyenCheckout（配置）；
const dropin=adyenCheckout.create（'dropin'）.mount（dropinContainer.current）；
返回(
滴水
)
}
useffectasyncdefaultimport Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
import '@adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef();
const [paymentMethods, setPaymentMethods] = useState({});
useEffect(() => {
const init = async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`)
.then(setPaymentMethods(response));
console.log(paymentMethods);
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
console.log(configuration.paymentMethodsResponse);
const AdyenCheckout = (await import('@adyen/adyen-web')).default;
const checkout = new AdyenCheckout(configuration);
checkout.create('dropin').mount(dropinContainer.current);
}
init();
},[]);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropinContainer}></div>
</div>
)
}
从“下一个/Head”导入Head；
从“react”导入{useRef，useffect，useState}；
从“../util/serverHelpers”导入{callServer，handleSubmission}；
导入“@adyen/adyenweb/dist/adyen.css”；
导出默认函数Dropin（）{
const dropinContainer=useRef（）；
const[paymentMethods，setPaymentMethods]=useState（{}）；
useffect（（）=>{
const init=async（）=>{
const response=await callServer（`${process.env.BASE_URL}/api/getPaymentMethods`）
。然后（设置付款方法（响应））；
console.log（付款方式）；
常量配置={
付款方式响应：付款方式，
clientKey:process.env.CLIENT_KEY，
地点：“恩欧”，
环境：“测试”，
付款方式配置：{
卡片：{
showPayButton：是的，
哈索德纳姆：没错，
holderNameRequired：是的，
名称：“信用卡或借记卡”，
金额：{
价值：2000年，
货币：“澳元”
}
}
},
onSubmit：（状态、组件）=>{
if（state.isValid）{
handleSubmission（状态、组件，“/api/initiatePayment”）；
}
},
onAdditionalDetails：（状态、组件）=>{
handleSubmission（状态、组件，“/api/submitAdditionalDetails”）；
},
};
console.log（configuration.paymentMethodsResponse）；
const AdyenCheckout=（等待导入（'@adyen/adyen-web'））。默认值；
const checkout=新的AdyenCheckout（配置）；
checkout.create（'dropin'）.mount（dropinContainer.current）；
}
init（）；
},[]);
返回(
滴水
)
}
useffectasyncdefaultimport Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
import '@adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef();
const [paymentMethods, setPaymentMethods] = useState({});
useEffect(() => {
const init = async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`)
.then(setPaymentMethods(response));
console.log(paymentMethods);
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
console.log(configuration.paymentMethodsResponse);
const AdyenCheckout = (await import('@adyen/adyen-web')).default;
const checkout = new AdyenCheckout(configuration);
checkout.create('dropin').mount(dropinContainer.current);
}
init();
},[]);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropinContainer}></div>
</div>
)
}
从“下一个/Head”导入Head；
从“react”导入{useRef，useffect，useState}；
从“../util/serverHelpers”导入{callServer，handleSubmission}；
导入“@adyen/adyenweb/dist/adyen.css”；
导出默认函数Dropin（）{
const dropinContainer=useRef（）；
const[paymentMethods，setPaymentMethods]=useState（{}）；
useffect（（）=>{
const init=async（）=>{
const response=await callServer（`${process.env.BASE_URL}/api/getPaymentMethods`）
。然后（设置付款方法（响应））；
console.log（付款方式）；
常量配置={
付款方式响应：付款方式，
clientKey:process.env.CLIENT_KEY，
地点：“恩欧”，
环境：“测试”，
付款方式配置：{
卡片：{
showPayButton：是的，
哈索德纳姆：没错，
holderNameRequired：是的，
名称：“信用卡或借记卡”，
金额：{
价值：2000年，
货币：“澳元”
}
}
},
onSubmit：（状态、组件）=>{
if（state.isValid）{
handleSubmission（状态、组件，“/api/initiatePayment”）；
}
},
onAdditionalDetails：（状态、组件）=>{
handleSubmission（状态、组件，“/api/submitAdditionalDetails”）；
},