Vue Storefront is now Alokai! Learn More
Basics

Basics

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

  • including CSS for the Adyen Drop-in.

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