I attempted to handle the redirection after completing the payment. I believed that once the payment was successfully completed, it should redirect to the destination I configured in Adyen. The configuration I set up is as follows, but I'm unsure why it isn't doing anything after completion. The result value returns "resultCode" as "Authorised." Can someone help me determine if I missed anything or misconfigured something?
const configuration = {
environment: 'test', // Change to 'live' for the live environment.
clientKey: 'test_...',
locale: "en-CA",
session: {
id: 'adyenSession-id',
sessionData: 'adyenSession-sessionData'
},
onPaymentCompleted: (result, component) => {
console.info(result, component);
},
onError: (error, component) => {
console.error(error.name, error.message, error.stack, component);
},
paymentMethodsConfiguration: {
card: {
hasHolderName: true,
holderNameRequired: true,
billingAddressRequired: true
}
}
};
(async () => {
const checkout = await AdyenCheckout(configuration);
const dropinComponent = checkout.create('dropin').mount('#dropin-container');
})();
Thank you.
The implementation is correct and the workflow is as expected. After performing the payment (using the Adyen Web drop-in) the result is delivered back to the drop-in and it is displayed to the shopper (i.e. Authorised).
The returnUrl
you configured in the /sessions
call (performed in your backend) is only used for 3D Secure 2 authentication. When the shopper needs to perform an additional action on the issuer's website (i.e., SMS verification code, password) this is the URL to which the shopper will be redirected to.
You can read here how to handle the redirect in such cases.