Vue Storefront is now Alokai! Learn More
Adyen commercetools SDK v1 -> v2

Adyen commercetools SDK v1 -> v2

In update, we decided to:

  • switch Adyen API from Node JS SDK to TypeScript SDK,
  • switch from Session flow to Advanced flow,
  • remove Session API flow,
  • introduce support for Partial Payments including handling of ORDER_CANCEL event.

If you want to migrate, firstly make sure version of packages, extension, and notification module matches specified on the Compatibility page.

Then let's adjust codebase.

Middleware config

We removed adyenCheckoutApiBaseUrl, adyenCheckoutApiVersion, returnUrl fields as they were redundant.

New required fields are adyenEnvironment, integrationName, origin, and optionals are buildCustomAdyenClientParameters, partialPaymentTTL, customOrderType.

middleware.config.js
adyen: {
  location: '@vsf-enterprise/adyen-commercetools-api/server',
  configuration: {
    ctApi: {
      apiHost: '<CT_HOST_URL>',
      authHost: '<CT_AUTH_URL>',
      projectKey: '<CT_PROJECT_KEY>',
      clientId: '<CT_CLIENT_ID>',
      clientSecret: '<CT_CLIENT_SECRET>',
-     scopes: ['manage_payments:<ADYEN_PROJECT_IDENTIFIER>', 'manage_orders:<ADYEN_PROJECT_IDENTIFIER>']
+     scopes: ['manage_payments:<ADYEN_PROJECT_IDENTIFIER>', 'manage_orders:<ADYEN_PROJECT_IDENTIFIER>', 'view_types:<ADYEN_PROJECT_IDENTIFIER>']
    },
    adyenApiKey: '<ADYEN_API_KEY>',
    adyenMerchantAccount: '<ADYEN_MERCHANT_ACCOUNT>',
-   returnUrl: 'http://localhost/adyen-redirect-back',
-   adyenCheckoutApiBaseUrl: '<ADYEN_CHECKOUT_API_BASE_URL>',
-   adyenCheckoutApiVersion: 71,
+   adyenEnvironment: 'TEST',
+   integrationName: 'adyen', // Keyname containing this integration object
+   origin: 'https://my-alokai-frontend.local', // URL of frontend
  }
},

Coming back from redirect based payment method

Adyen Drop-in

We've changed a mountPaymentElement SDK method to suit Advanced flow. The following code should be used to mount Adyen Drop-in (call createAdyenDropin to mount):

Changes in the aforementioned boilerplate are mostly related to switch to advanced flow and support for Partial Payments.

AdyenRedirectBack page and route

The AdyenRedirectBack page is no longer needed, so it can be removed.

BuildCustomPaymentAttributesParams type changed

export type BuildCustomPaymentAttributesParams = {
  payload: CreateSessionRequestPayload;
  payment: PaymentWithFields;
  cart: Cart;
+ origin: string;
- shopperLocale?: string;
  customerId?: string;
+ balance?: Balance;
};

interface Balance {
  value: number;
  currency: string;
}

If you are using the buildCustomPaymentAttributes middleware config property, you will have to adjust it to match the new type.

The signature of the buildCustomPaymentAttributes function changed and it's not used to extend creating session payload but one sent to the POST /payments. It's similiar but might require some additional adjustments.

Extend commercetools cart/order type

Setup webhook