How do I check if the Adyen Web Drop-in is valid before submitting

Question

I'm using the Adyen Web Drop-in for my website. I don't show the pay button in the drop-in, instead I'm using a button outside of the drop-in to initiate the submit.

But how do I check if all required fields are entered before submitting? For example when choosing iDeal, if the user doesn't select the bank from the drop-down, when I initiate the submit, the drop-in will show that the select your bank drop-down is not valid and not continue with the make payment request. But I don't get a notification or error or anything.

I disable my pay button when clicked to prevent the user from clicking it again while the payment is in process. But without some notification, how do I now to enable the button again?

Btw, I'm still using AngularJS for my site. Still in the process of upgrading to Angular, so the payment form is still on AngularJS.

Here's the code that mounts the drop-in:

            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');
        }

I added the console.logs to see what happens. When submit the form with a bank selected, the first message I see is the makePayment message, as expected. But if I don't select a bank in the drop-down and submit, none of the logs gets triggered. So clearly the drop-in checks if all required fields are entered before making the payment (as it should), but I don't see how I can get that feedback.

user_9095551 · Answer

You can rely on a different handler onChange to check the state of the component.

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);
}

How do I check if the Adyen Web Drop-in is valid before submitting

1 Answers