Vue Storefront is now Alokai! Learn More
Alokai Storefront configuration

Alokai Storefront configuration

This guide will show you how to configure Adyen integration for SFCC in a Alokai Storefront application.

Something's missing?

If you don't have an Alokai Storefront project yet, request a demo from our Sales team.

Requirements

1

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

2

Install Storefront dependencies

Navigate to the Storefront directory:

cd apps/storefront-unified-nextjs

and install the following packages

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

3

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:

.env
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.

middleware.config.ts
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,
        returnUrl: 'http://localhost:3000/adyen/returnUrl',
        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.

PropertyRequired?Description
adyenApiKeyYour Adyen API Key
adyenMerchantAccountName of your Adyen Merchant Account
adyenCheckoutApiBaseUrlOne of Adyen Checkout Endpoints. [version] and [method] can be skipped.
returnUrlThe url used to initialize the session call and for 3rd party payment providers to redirect to after processing a payment. (e.g. http://localhost:3000/adyen/returnUrl)
environmentType of your Adyen environment (e.g. TEST or LIVE)
sfccApiMiddlewareNameThe key used to register SFCC integration in middleware.config.ts. Usually commerce or sfcc. Required for orchestration purposes.
adyenPaymentMethodIdThe name of the Payment Method added to SFCC by Adyen's cartridge. Defaults to AdyenComponent
adyenCheckoutApiVersion❌ Adyen Checkout API Version
buildCustomSessionAttributesFunction returning object that will be assigned to the payload sent to the Adyen's POST /sessions endpoint
buildCustomPaymentAttributesFunction returning object that will be assigned to the payload sent to the Adyen's POST /payments endpoint

4

Configure SDK

The next step is adding Adyen module to Alokai SDK.

In the /apps/storefront-unified-nextjs/sdk directory, find the sdk.config.ts file and initialize the Adyen module with the following lines:

sdk.config.ts
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>',
  }),
}));
PropertyRequired?Description
apiUrlThe base URL of the Adyen integration registered in the Server Middleware
adyenClientKeyYour Adyen Client Key
adyenEnvironmentType of your Adyen environment (e.g. test or live)

What next?

With your Alokai Storefront project configured, proceed to the Guides section of our documentation. Start by learning how to place your first order.