Basics

This guide will help you get started with the Adyen integration for Commercetools. You'll learn how to:

create a payment session,
mount the Adyen Drop-in component,
submit payment details,
remove a saved card.

Payment Session

The first step in the payment process is to create a payment session. This is done by calling the createSession method from the Adyen Commercetools SDK.

import { sdk } from "@/sdk";

const session = await sdk.adyen.createSession();

It returns the Session object, which is needed to mount the Adyen Drop-in component.

Mounting the Drop-in Component

Adyen Drop-in is not styled by default. This is because you might want to apply your own styles. To learn how to implement default Adyen Drop-in stylesheet jump to this section.

The next step is to mount the Adyen Drop-in component. This is done by calling the mountPaymentElement method from the the Adyen Commercetools SDK.

import { sdk } from "@/sdk";

const session = await sdk.adyen.createSession();

await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element", // The DOM element where the Drop-in component will be mounted
  adyenConfiguration: {
    // ...
  },
  dropinConfiguration: {
    // ...
  },
});

Adyen configuration

The most common approach is to add the onPaymentCompleted callback to the adyenConfiguration object. This callback triggers when payment concludes, whether successful or not. It takes two arguments: result and component. The result object holds the payment outcome, while the component object refers to the Drop-in component instance. After placing an order, it's crucial to clear the current cart. In Nuxt, for example, you can achieve this with useCart().setCart(null);

import { sdk } from "@/sdk";

const session = await sdk.adyen.createSession();

await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element",
  adyenConfiguration: {
    async onPaymentCompleted(result, component) {
      if (['Refused', 'Cancelled', 'Error'].includes(result.resultCode)) {
        // Handling negative result codes and unmounting the Adyen Drop-in
        // To allow the user to try again by recreating session and component
        component.unmount();
        // Show some meaningful error message
        // Reinitialize payment session here!
      } else {
        // Handling positive result codes + Pending, by placing an order and
        // redirecting to the thank you page
        const { data: { me } } = await sdk.commerce.getMe();
        const { data: { order } } = await sdk.commerce.createMyOrderFromCart({
          cartId: me.activeCart.id,
          cartVersion: me.activeCart.version
        });
        // Clear cart here!
        window.location.href = `${window.location.origin}/checkout/thank-you?order=${order.id}`;
      }
    }
  },
  dropinConfiguration: {
    // ...
  },
});

Within the onPaymentCompleted callback, create an order from the cart and redirect the user to the thank you page. To do this, use the Vue Storefront Commercetools SDK, like shown above.

Drop-in configuration

The dropinConfiguration contains the Drop-in configuration. Typically, you'll want to add the showRemovePaymentMethodButton property to the dropinConfiguration object. This property determines whether the "Remove" button is shown for stored payment methods.

A feature of removing stored payment methods requires additional step. To learn how to enable it, jump to the Removing a saved card section.

const session = await sdk.adyen.createSession();
await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element",
  adyenConfiguration: {
    // ...
  },
  dropinConfiguration: {
    showRemovePaymentMethodButton: true,
  },
});

Including CSS for the Adyen Drop-in

Import the CSS file, as mentioned in the Adyen Drop-in's documentation. If you want to extend the default stylesheet, follow this document.

import "@adyen/adyen-web/dist/adyen.css";
import { sdk } from "@/sdk";

const session = await sdk.adyen.createSession();

await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element", // The DOM element where the Drop-in component will be mounted
  adyenConfiguration: {
    // ...
  },
  dropinConfiguration: {
    // ...
  },
});

More options

You can read about the mountPaymentElement method properties here

Submitting Payment Details

Removing a Saved Card

To remove a saved card, call the removeCard method from the Adyen Commercetools SDK. It should be used in the onDisableStoredPaymentMethod callback added to the dropinConfiguration object.

const session = await sdk.adyen.createSession();
await sdk.adyen.mountPaymentElement({
  session,
  paymentDOMElement: "#payment-element",
  adyenConfiguration: {
    // ...
  },
  dropinConfiguration: {
    showRemovePaymentMethodButton: true,
    async onDisableStoredPaymentMethod(
      recurringDetailReference,
      resolve,
      reject
    ) {
      try {
        await sdk.adyen.removeCard({ recurringDetailReference });
        return resolve();
      } catch (err) {
        // Do something with err...
        return reject();
      }
    },
  },
});