Alokai Storefront configuration

Install Server Middleware dependencies

Navigate to the Server Middleware directory:

cd apps/storefront-middleware

and install the following packages

yarn add @vsf-enterprise/adyen-sfcc-api

Install Storefront dependencies

Navigate to the Storefront directory:

cd apps/storefront-unified-nextjs

cd apps/storefront-unified-nuxt

and install the following packages

yarn add @vsf-enterprise/adyen-sfcc-sdk

Configure Server Middleware

To register the Adyen integration in the Server Middleware, add its credentials to the .env file in the /apps/storefront-middleware directory:

ADYEN_API_KEY=<ADYEN_API_KEY>
ADYEN_MERCHANT_ACCOUNT=<ADYEN_MERCHANT_ACCOUNT>
ADYEN_CHECKOUT_API_BASE_URL=<ADYEN_CHECKOUT_API_BASE_URL>
ADYEN_ENVIRONMENT=<ADYEN_ENVIRONMENT>
SFCC_API_MIDDLEWARE_NAME=<SFCC_API_MIDDLEWARE_NAME>
ADYEN_PAYMENT_METHOD_ID=<ADYEN_PAYMENT_METHOD_ID>
ADYEN_CHECKOUT_API_VERSION=<ADYEN_CHECKOUT_API_VERSION>

and use them in the middleware.config.ts file located in the same directory.

import type { Basket } from "@vsf-enterprise/sfcc-types";
import type { OrderPaymentInstrument } from "@vsf-enterprise/adyen-sfcc-types";

const {
  ADYEN_API_KEY,
  ADYEN_MERCHANT_ACCOUNT,
  ADYEN_CHECKOUT_API_BASE_URL,
  ADYEN_ENVIRONMENT,
  SFCC_API_MIDDLEWARE_NAME,
  ADYEN_PAYMENT_METHOD_ID,
  ADYEN_CHECKOUT_API_VERSION
} = process.env;

export default {
  integrations: {
    // ...
    adyen: {
      location: "@vsf-enterprise/adyen-sfcc-api/server",
      configuration: {
        adyenApiKey: ADYEN_API_KEY,
        adyenMerchantAccount: ADYEN_MERCHANT_ACCOUNT,
        adyenCheckoutApiBaseUrl: ADYEN_CHECKOUT_API_BASE_URL,
        environment: ADYEN_ENVIRONMENT,
        sfccApiMiddlewareName: SFCC_API_MIDDLEWARE_NAME,
        adyenPaymentMethodId: ADYEN_PAYMENT_METHOD_ID,
        adyenCheckoutApiVersion: ADYEN_CHECKOUT_API_VERSION,
        buildCustomPaymentAttributes: (params) => {},
        buildCustomSessionAttributes: (params) => {},
      }
    }
  },
};

A complete list describing available configuration options can be found below.

| Property | Required? | Description | --- | :---: | ---
| adyenApiKey | ✅ | Your Adyen API Key | adyenMerchantAccount | ✅ | Name of your Adyen Merchant Account | adyenCheckoutApiBaseUrl | ✅ | One of Adyen Checkout Endpoints. [version] and [method] can be skipped. | environment | ✅ | Type of your Adyen environment (e.g. TEST or LIVE) | sfccApiMiddlewareName | ✅ | The key used to register SFCC integration in middleware.config.ts. Usually commerce or sfcc. Required for orchestration purposes. | adyenPaymentMethodId | ❌ | The name of the Payment Method added to SFCC by Adyen's cartridge. Defaults to AdyenComponent | adyenCheckoutApiVersion | ❌  | Adyen Checkout API Version | buildCustomSessionAttributes | ❌ | Function returning object that will be assigned to the payload sent to the Adyen's POST /sessions endpoint | buildCustomPaymentAttributes | ❌ | Function returning object that will be assigned to the payload sent to the Adyen's POST /payments endpoint

Configure SDK

The next step is adding Adyen module to Alokai SDK.

import { adyenSFCCModule, AdyenSFCCModuleType } from '@vsf-enterprise/adyen-sfcc-sdk';

export const { getSdk } = createSdk(options, ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
  // ...other modules
  adyen: buildModule<AdyenSFCCModuleType>(adyenSFCCModule, {
    apiUrl: `${middlewareUrl}/adyen`,
    adyenClientKey: '<ADYEN_CLIENT_KEY>',
    adyenEnvironment: '<ENVIRONMENT>',
  }),
}));

import { adyenSFCCModule, AdyenSFCCModuleType } from '@vsf-enterprise/adyen-sfcc-sdk';

export default defineSdkConfig(({ buildModule, middlewareUrl, getCookieHeader }) => ({
  // ...other modules
  adyen: buildModule<AdyenSFCCModuleType>(adyenSFCCModule, {
    apiUrl: `${middlewareUrl}/adyen`,
    adyenClientKey: '<ADYEN_CLIENT_KEY>',
    adyenEnvironment: '<ENVIRONMENT>',
  }),
}));

| Property | Required? | Description | --- | :---: | ---
| apiUrl | ✅ | The base URL of the Adyen integration registered in the Server Middleware | adyenClientKey | ✅ | Your Adyen Client Key | adyenEnvironment | ✅ | Type of your Adyen environment (e.g. test or live)