Vue Storefront is now Alokai! Learn More
Commercetools: Quickstart

Commercetools: Quickstart

Like the Adyen Integration, this guide is framework-agnostic. The examples focus on the integration. Use whatever conventions your framework uses.

Prerequisites

Before you start, make sure you have a project that meets the following requirements:

1

Install

Install packages

yarn
yarn add @vsf-enterprise/sdk @vsf-enterprise/adyen-commercetools-sdk @vsf-enterprise/adyen-commercetools-api
# yarn add @vsf-enterprise/sdk @vsf-enterprise/adyen-sfcc-sdk @vsf-enterprise/adyen-sfcc-api

2

Configuration For Commercetools

Add Adyen configuration to your middleware.config.ts

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>']
    },
    adyenApiKey: '<ADYEN_API_KEY>',
    adyenMerchantAccount: '<ADYEN_MERCHANT_ACCOUNT>',
    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

3

Register SDK module for Adyen commercetools

sdk/sdk.config.ts
// ...
import { adyenCtModule } from '@vsf-enterprise/adyen-commercetools-sdk';

export const { getSdk } = createSdk(
  options,
  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders, defaults }) => {
    return {
      // ...
      adyen: buildModule(
        adyenCtModule, {
          apiUrl: `${middlewareUrl}/adyen`,
          adyenClientKey: 'test_******',
          adyenEnvironment: 'test',
        }
      )
    };
  },
);

4

Create Payment Component/Page For Commercetools

Add the payment-element to the template:

// In your template, e.g. Payment.vue
...
<div id="adyen-payment-element"></div>
...

Prepare logic responsible for handling payment, and call it:

This snippet has placeholder to inject logic responsible for placing an order. You can find it easily by looking for the following string and replacing it with your code for placing an order. // Here put a code to place an order and redirect to success page.

If you are using redirect-based payments, there is an additional step required.

React in strict mode in development calls useEffect(fn, []); twice. This can break Adyen Drop-in. Please make sure you call createAdyenDropin only once.

5

Extend commercetools cart/order type

Validation

The integration will check on start up of middleware server if type exists and it has fields used by integration. If validation fails then it stops the middleware from running at all to prevent runtime payment-related critical errors.

6

Setup webhook

8

Enjoy your new Adyen integration!