Update Adyen Checkout API to v67 and Adyen Payment API to v64 (#673)

extension/docs/WebComponentsIntegrationGuide.md

@@ -245,7 +245,7 @@ Pass the `getPaymentMethodsResponse` custom field value to your front end. You m
       "adyenMerchantAccount": "YOUR_MERCHANT_ACCOUNT",
       "commercetoolsProjectKey": "YOUR_COMMERCETOOLS_PROJECT_KEY",
       "getPaymentMethodsRequest": "{\"countryCode\":\"DE\",\"shopperLocale\":\"de-DE\",\"amount\":{\"currency\":\"EUR\",\"value\":1000}}",
-      "getPaymentMethodsResponse": "{\"groups\":[{\"name\":\"Gift Card\",\"types\":[\"givex\",\"svs\"]},{\"name\":\"Credit Card\",\"types\":[\"visa\",\"mc\",\"amex\",\"maestro\",\"uatp\",\"cup\",\"diners\",\"discover\",\"hipercard\",\"jcb\"]}],\"paymentMethods\":[{\"name\":\"PayPal\",\"supportsRecurring\":true,\"type\":\"paypal\"},{\"brands\":[\"visa\",\"mc\",\"amex\",\"maestro\",\"uatp\",\"cup\",\"diners\",\"discover\",\"hipercard\",\"jcb\"],\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"}],\"name\":\"Kreditkarte\",\"type\":\"scheme\"},{\"name\":\"Sofort.\",\"supportsRecurring\":true,\"type\":\"directEbanking\"},{\"details\":[{\"key\":\"sepa.ownerName\",\"type\":\"text\"},{\"key\":\"sepa.ibanNumber\",\"type\":\"text\"}],\"name\":\"SEPA Lastschrift\",\"supportsRecurring\":true,\"type\":\"sepadirectdebit\"},{\"name\":\"Rechnung mit Klarna.\",\"supportsRecurring\":true,\"type\":\"klarna\"},{\"details\":[{\"key\":\"bic\",\"optional\":true,\"type\":\"text\"}],\"name\":\"GiroPay\",\"supportsRecurring\":true,\"type\":\"giropay\"},{\"name\":\"Ratenkauf mit Klarna.\",\"supportsRecurring\":true,\"type\":\"klarna_account\"},{\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"},{\"key\":\"telephoneNumber\",\"optional\":true,\"type\":\"text\"}],\"name\":\"ExpressPay\",\"supportsRecurring\":true,\"type\":\"cup\"},{\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedPassword\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"}],\"name\":\"Givex\",\"supportsRecurring\":true,\"type\":\"givex\"},{\"name\":\"Pay now with Klarna.\",\"supportsRecurring\":true,\"type\":\"klarna_paynow\"},{\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedPassword\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"}],\"name\":\"SVS\",\"supportsRecurring\":true,\"type\":\"svs\"}]}"
+      "getPaymentMethodsResponse": "{\"paymentMethods\":[{\"configuration\":{\"intent\":\"capture\"},\"name\":\"PayPal\",\"type\":\"paypal\"},{\"brands\":[\"visa\",\"mc\",\"amex\",\"maestro\",\"uatp\",\"cup\",\"diners\",\"discover\",\"hipercard\",\"jcb\"],\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"}],\"name\":\"Kreditkarte\",\"type\":\"scheme\"},{\"name\":\"Sofort.\",\"type\":\"directEbanking\"},{\"details\":[{\"key\":\"sepa.ownerName\",\"type\":\"text\"},{\"key\":\"sepa.ibanNumber\",\"type\":\"text\"}],\"name\":\"SEPA Lastschrift\",\"type\":\"sepadirectdebit\"},{\"name\":\"Rechnung mit Klarna.\",\"type\":\"klarna\"},{\"name\":\"GiroPay\",\"type\":\"giropay\"},{\"name\":\"Ratenkauf mit Klarna.\",\"type\":\"klarna_account\"},{\"brand\":\"givex\",\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedPassword\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"}],\"name\":\"Givex\",\"type\":\"giftcard\"},{\"name\":\"Sofort bezahlen mit Klarna.\",\"type\":\"klarna_paynow\"},{\"brand\":\"svs\",\"details\":[{\"key\":\"encryptedCardNumber\",\"type\":\"cardToken\"},{\"key\":\"encryptedSecurityCode\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryMonth\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedExpiryYear\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"encryptedPassword\",\"optional\":true,\"type\":\"cardToken\"},{\"key\":\"holderName\",\"optional\":true,\"type\":\"text\"}],\"name\":\"SVS\",\"type\":\"giftcard\"}]}"
     }
   }
 }
@@ -421,7 +421,7 @@ Notice that on an `Authorised` (successful) result, the integration will automat
 #### Action Response
 
 Some payment methods require additional action from the shopper such as: to scan a QR code, to authenticate a payment with 3D Secure, or to log in to their bank's website to complete the payment.
-In this case you'll receive an `action` object (e.g. redirect, threeDS2Fingerprint, qrCode etc).
+In this case you'll receive an `action` object (e.g. redirect, threeDS2, qrCode etc).
 
 Here an example response from Adyen where the user has to be redirected to a payment provider page:
 
@@ -580,7 +580,7 @@ By default, the extension module will populate `lineItems` for you but in case y
 
 ## Step 6: Submit additional payment details
 
-If the shopper performed an additional action (e.g. redirect, threeDS2Fingerprint) in the [Step-5](#step-5-make-a-payment), you need to make `submitAdditionalPaymentDetailsRequest` in order to complete the payment.
+If the shopper performed an additional action (e.g. redirect, threeDS2) in the [Step-5](#step-5-make-a-payment), you need to make `submitAdditionalPaymentDetailsRequest` in order to complete the payment.
 
 Pass the generated component data to your merchant server, the data is available either in `state.data` from the `onAdditionalDetails` event or, for redirects, the parameters you received when the shopper redirected back to your website.
 

extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commercetools-adyen-integration-extension",
-  "version": "7.1.4",
+  "version": "8.0.0",
   "description": "Integration between commercetools and Adyen payment service provider",
   "license": "MIT",
   "scripts": {

extension/src/config/config.js

@@ -66,10 +66,10 @@ function getAdyenConfig(adyenMerchantAccount) {
     )
   return {
     apiKey: adyenConfig.apiKey,
-    apiBaseUrl: adyenConfig.apiBaseUrl || 'https://checkout-test.adyen.com/v52',
+    apiBaseUrl: adyenConfig.apiBaseUrl || 'https://checkout-test.adyen.com/v67',
     legacyApiBaseUrl:
       adyenConfig.legacyApiBaseUrl ||
-      'https://pal-test.adyen.com/pal/servlet/Payment/v52',
+      'https://pal-test.adyen.com/pal/servlet/Payment/v64',
     clientKey: adyenConfig.clientKey || '', // used only for development purpose
   }
 }

extension/test/e2e/credit-card-3ds-native.spec.js

@@ -107,14 +107,8 @@ describe('::creditCardPayment3dsNative::', () => {
             clientKey,
           })
 
-          const paymentAfterIdentifyShopper = await identifyShopper({
-            payment: paymentAfterMakePayment,
-            browserTab,
-            baseUrl,
-          })
-
           const paymentAfterAuthentication = await performChallengeFlow({
-            payment: paymentAfterIdentifyShopper,
+            payment: paymentAfterMakePayment,
             browserTab,
             baseUrl,
           })
@@ -159,7 +153,8 @@ describe('::creditCardPayment3dsNative::', () => {
     return updatedPayment
   }
 
-  async function identifyShopper({ payment, browserTab, baseUrl }) {
+  async function performChallengeFlow({ payment, browserTab, baseUrl }) {
+    // Submit additional details 1
     const {
       makePaymentResponse: makePaymentResponseString,
     } = payment.custom.fields
@@ -175,51 +170,9 @@ describe('::creditCardPayment3dsNative::', () => {
 
     await browserTab.waitForTimeout(2000)
 
-    const additionalPaymentDetailsInput = await browserTab.$(
-      '#adyen-additional-payment-details'
-    )
-    const additionalPaymentDetailsString = await browserTab.evaluate(
-      (el) => el.value,
-      additionalPaymentDetailsInput
-    )
-    const { body: updatedPayment2 } = await ctpClient.update(
-      ctpClient.builder.payments,
-      payment.id,
-      payment.version,
-      [
-        {
-          action: 'setCustomField',
-          name: 'submitAdditionalPaymentDetailsRequest',
-          value: additionalPaymentDetailsString,
-        },
-      ]
-    )
-
-    return updatedPayment2
-  }
-
-  async function performChallengeFlow({ payment, browserTab, baseUrl }) {
-    // Submit additional details 1
-    const {
-      submitAdditionalPaymentDetailsResponse: submitAdditionalPaymentDetailsResponseString,
-    } = payment.custom.fields
-    const submitAdditionalPaymentDetailsResponse1 = await JSON.parse(
-      submitAdditionalPaymentDetailsResponseString
-    )
-    const redirectPaymentFormPage = new RedirectPaymentFormPage(
-      browserTab,
-      baseUrl
-    )
-    await redirectPaymentFormPage.goToThisPage()
-    await redirectPaymentFormPage.redirectToAdyenPaymentPage(
-      submitAdditionalPaymentDetailsResponse1
-    )
-
-    await browserTab.waitForTimeout(2000)
-
-    // Submit additional details 2
+    // Submit additional details
     const creditCardNativePage = new CreditCardNativePage(browserTab, baseUrl)
-    const additionalPaymentDetailsString2 = await creditCardNativePage.finish3dsNativePayment()
+    const additionalPaymentDetailsString = await creditCardNativePage.finish3dsNativePayment()
     const { body: finalPayment } = await ctpClient.update(
       ctpClient.builder.payments,
       payment.id,
@@ -228,11 +181,7 @@ describe('::creditCardPayment3dsNative::', () => {
         {
           action: 'setCustomField',
           name: 'submitAdditionalPaymentDetailsRequest',
-          value: additionalPaymentDetailsString2,
-        },
-        {
-          action: 'setCustomField',
-          name: 'submitAdditionalPaymentDetailsResponse',
+          value: additionalPaymentDetailsString,
         },
       ]
     )

extension/test/e2e/credit-card-3ds-redirect.spec.js

@@ -1,4 +1,3 @@
-const querystring = require('querystring')
 const iTSetUp = require('../integration/integration-test-set-up')
 const ctpClientBuilder = require('../../src/ctp')
 const config = require('../../src/config/config')
@@ -45,15 +44,15 @@ describe('::creditCardPayment3dsRedirect::', () => {
       )
     }
     routes['/return-url'] = async (request, response) => {
-      const body = await httpUtils.collectRequestData(request)
+      const params = getRequestParams(request)
       return httpUtils.sendResponse({
         response,
         headers: {
           'Content-Type': 'text/html',
         },
         data:
           '<!DOCTYPE html><html><head></head>' +
-          `<body><div id=redirect-response>${body}</div></body></html>`,
+          `<body><div id=redirect-response>${params.redirectResult}</div></body></html>`,
       })
     }
 
@@ -171,7 +170,6 @@ describe('::creditCardPayment3dsRedirect::', () => {
     const value = await creditCardRedirectPage.finish3dsRedirectPayment()
 
     // Submit payment details
-    const parsedQuery = querystring.parse(value)
     const { body: finalPayment } = await ctpClient.update(
       ctpClient.builder.payments,
       payment.id,
@@ -181,12 +179,29 @@ describe('::creditCardPayment3dsRedirect::', () => {
           action: 'setCustomField',
           name: 'submitAdditionalPaymentDetailsRequest',
           value: JSON.stringify({
-            details: parsedQuery,
+            details: {
+              redirectResult: decodeURIComponent(value),
+            },
           }),
         },
       ]
     )
 
     return finalPayment
   }
+
+  function getRequestParams(req) {
+    const queries = req.url.split('?')
+    const result = {}
+    if (queries.length >= 2) {
+      queries[1].split('&').forEach((item) => {
+        try {
+          result[item.split('=')[0]] = item.split('=')[1]
+        } catch (e) {
+          result[item.split('=')[0]] = ''
+        }
+      })
+    }
+    return result
+  }
 })

extension/test/e2e/fixtures/3ds-v2-identify-shopper-form.html

@@ -5,8 +5,8 @@
     <title>Submit additional payment details</title>
     <link
       rel="stylesheet"
-      href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.17.0/adyen.css"
-      integrity="sha384-gbQyzqV1xX+snFEMrubEm0IpmYSufBjUnHzTaJZ+dcWCyxl0j94IZhnfC2gbxgeu"
+      href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/4.3.0/adyen.css"
+      integrity="sha384-5CDvDZiVPuf+3ZID0lh0aaUHAeky3/ACF1YAKzPbn3GEmzWgO53gP6stiYHWIdpB"
       crossorigin="anonymous"
     />
   </head>
@@ -36,8 +36,8 @@
     <div id="component-container"></div>
 
     <script
-      src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.17.0/adyen.js"
-      integrity="sha384-G9jkTAyCOIVdksXbtrNgdur2DyRi85ujYLXbqe5AvvH23rN21d7xiU7cRIqvsEaH"
+      src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/4.3.0/adyen.js"
+      integrity="sha384-cNkiBPQRGouJfbstYuSccx2XkGe3RB28iYrjge6rLIDtex7fk5+3/E9f4EZ34fxE"
       crossorigin="anonymous"
     ></script>
     <script type="application/javascript">