adyen-web VS adyen-cse-web

Our Adyen Web SDK and server libraries support two options for 3DS2 payments:

Maintain an up-to-date version of the latest Adyen Web Components/Drop-in.

Note: This is absolutely not recommended for production use with Adyen as the Payment Request API is quite new and capturing credit card data via this is still not as secure as using the Web components provided by Adyen which securely encrypts the data. I'm not encrypting card details, which is only possible if you are PCI compliant and your Adyen account has the necessary roles. In the future, once the Payment Handler API becomes widely implemented by browsers, this could change and Adyen might start providing official support for this. We will see more about that later in the post.

async function checkout() { try { const adyenPaymentMethods = await callServer("/api/getPaymentMethods"); // create a new payment request const request = new PaymentRequest(buildSupportedPaymentMethodData(adyenPaymentMethods), buildShoppingCartDetails()); // show payment sheet const payment = await request.show(); // Here we would process the payment. const response = await callServer("/api/initiatePayment", { // This works only for PCI compliant credit card payments. // For non PCI compliant payments the data needs to be encrypted with something like https://github.com/Adyen/adyen-cse-web // But encrypting data here is not secure as a malicious script may be able to access the data in memory here paymentMethod: { type: "scheme", number: payment.details.cardNumber, expiryMonth: payment.details.expiryMonth, expiryYear: payment.details.expiryYear, holderName: payment.details.cardholderName, cvc: payment.details.cardSecurityCode, }, }); // Handle the response code switch (response.resultCode) { case "Authorised": await payment.complete("success"); window.location.href = "/result/success"; break; case "Pending": case "Received": await payment.complete("unknown"); window.location.href = "/result/pending"; break; case "Refused": await payment.complete("fail"); window.location.href = "/result/failed"; break; default: await payment.complete("fail"); window.location.href = "/result/error"; break; } } catch (error) { // ... } return false; }