1

我正在为我的网站使用 Adyen Web Drop-in。我没有在插件中显示支付按钮，而是使用插件外部的按钮来启动提交。

但是如何在提交之前检查是否输入了所有必填字段？比如在选择iDeal时，如果用户没有从下拉菜单中选择银行，当我发起提交时，下拉菜单会显示选择您的银行下拉菜单无效并且不继续make支付请求。但我没有收到通知或错误或任何东西。

单击时我禁用了我的付款按钮，以防止用户在付款过程中再次单击它。但是没有一些通知，我现在如何再次启用该按钮？

顺便说一句，我仍在为我的网站使用 AngularJS。仍在升级到 Angular 的过程中，因此付款表格仍在 AngularJS 上。

这是安装插件的代码：

            function mountAdyenPaymentDropIn(adyenPaymentMethods) {
            var configuration = {
                locale: 'en_US',
                environment: adyenPaymentMethods.environment,
                clientKey: adyenPaymentMethods.clientKey,
                paymentMethodsResponse: adyenPaymentMethods.paymentMethods
            };
            var checkout = new AdyenCheckout(configuration);

            $scope.adyenPaymentDropin = checkout
                .create('dropin',
                    {
                        showPayButton: false,
                        paymentMethodsConfiguration: {},
                        onSubmit: (state, dropin) => {
                            console.log('onsubmit')
                            makePayment(state.data)
                                .then(response => {
                                    console.log('makepayment response', response);
                                    handleResponse(response, dropin);
                                })
                                .catch(error => {
                                    console.log('makePayment error', error);
                                    throw Error(error);
                                });
                        },
                        onAdditionalDetails: (state, dropin) => {
                            console.log('details')
                            makeDetailsCall(state.data)
                                .then(response => {
                                    console.log('details response', response);
                                    handleResponse(response, dropin);
                                })
                                .catch(error => {
                                    console.log('additionalDetails error', error);
                                    throw Error(error);
                                });
                        },
                        onError: (error, component) => {
                            console.log('dropin error', error, component);
                        }
                    })
                .mount('#dropin');
        }

我添加了 console.logs 来看看会发生什么。当提交选择银行的表单时，我看到的第一条消息是 makePayment 消息，正如预期的那样。但是，如果我没有在下拉列表中选择银行并提交，则不会触发任何日志。很明显，在付款之前是否输入了所有必填字段（应该如此），但我不知道如何获得该反馈。

4

1 回答 1

0

您可以依靠不同的处理程序onChange来检查组件的状态。

onAdditionalDetails: (state: any, dropin: any) => {
     console.log('details')
},
onChange: (state: any, dropin: any) => {
     console.log('onChange')
     console.log(state.isValid) // true or false
},
onError: (error, component) => {
     console.log('dropin error', error, component);
}
于 2021-12-17T15:41:28.543 回答