docs

Adyen Integration Guide (hidden)

Introduction

This section covers client-side integration of Adyen payment methods using the official Adyen Components. Please note that this guide specifically focuses on Adyen Components, not the Adyen Drop-in solution.

The general integration flow is illustrated below. This flow remains consistent—or very similar—across the various payment methods supported by Adyen.

Select Adyen payment method

To select an Adyen payment method after presenting the available options to the customer, you must call the Select Payment Method endpoint and provide the paymentOptionKey corresponding to Adyen payment method..


Example Payload:

{"data":{"paymentOptionKey":"adyen_credit_card"}}

Example Response:

{
  "orderState": {
    "payment": {
      "selected": [
        {
          "configuration": {
            "initializationData": {
              "clientKey": "test_FPTJ7CKPLBG57O2DEFVKRH636IUFMONJ",
              "deviceIdent": {
                "token": "83d44b1fac0e9d4a9948c142d14017a9301785ef722b2233a90a10acd68da2ca"
              },
              "pspSessionId": "CS68742934999B3E36",
              "sessionData": "Ab02b4c0!BQABAgApjD4SwgNU8v1yeW0691zu7P4ief0ICuRDWq9zlohVuLWx394jIosdCMMSL9rnLLLIbaKJ8tepji1hqvc3O1e5QKVMfg0XkB+gePN+gX8SZupNAu97dveJYA789/L8SKlZrRtnjQWo/FvFaJkphyANs32cFv3wYvUjmDnMKreZ+C7xNOXMn2D+tFMiDuOt19aq791m+SPCppbbLrYfZtnpX5hMOUA9XrvsSPsNQuZ10G3uf9MkaeyU5kV3Ao8qZt4GS/krA1ZX/AEOFeSJKA6isVXLY19ZRlRmfeGVlQp+1dKoBOHpjlmWwCUPsTIG2wicAHPvy9nYEKrzJhygzQcDxoxugvo++AJ/ET8lC7YqBTkHYso42Jk/f5DPDZFiKKS5YyvYcapzWzPylYRWiji1jd8H9FWGt/afG963bKru884S3xsKBs+H1q34yl5nwakYCLkWElv9gYUfQDRRj6x7K5GTlBeuZ+0zwcWvCYWZ9TGW3h1hLVXzRdJsS2dyUyMP7fjHh3BbNAzLjzku3dovNYToPmsK3odGuXt7W/Vvztjz/8k96N4p17zx6YXF7JK50O/W6acr0lc3sR5keMlM4z5aiEc0XR043dV047QINizBM35cqPfs2v5Ag+5q6QU9ZJx7w9CLbaPiR08IzndCbX/NK08oTp+JCTAvmAp7XAyHX0410Iz30ZW+/38ASnsia2V5IjoiQUYwQUFBMTAzQ0E1MzdFQUVEODdDMjRERDUzOTA5QjgwQTc4QTkyM0UzODIzRDY4REFDQzk0QjlGRjgzMDVEQyJ98KgOUw5hRIKLOkVlNSWTDhT6KoijsflcXJPUNqNt4yRQz4Lmwx5ZYeVpBzgu2kqvVqTiqqBuXHF5gFYvLa3rCKKXM6anlsl/G2tD5ksEicxT6be9gYoMNQIRCiNnbWhosW5fV7aS6uj3H2SGoZIGpjpX6CzuoDNAZifNUlGBbXDklGfFgMXNbzUz3RsyJzAtpnnRbgDho289d2U/YCjc+NjhU0YIvb8SvF7q1uyV0FEaqvszwV329fyTPJX4RBemId5CIBaEhTW2BDpzswE9WXjXkynbMFi9tWEBHnkpiws+CjL3smouEN4d+1QQAC9f74Lk3g2lCuZc1JNvY7jim/ZisiKDdKFzlvikSSd/c02GP0Wesc+mjTYk9DglR1B+raE8DGYv3WeG4HqbApoGqYb49sTAFHyPUloowyRpE+zgoZaOqVWl+NTdOCbjTXoPSL3lMjwZbQYzdrPM1fmG5hzYS3+7I8Lske4MoHqxxpDGMiNwJhffdTDYA1Ior+Qs0a27eQzquGgTgoJolJKBtbiBcnXgRfo6pRSo1TBWBvBLbPVdzJZENogKmnEx8ImrHtIfBANELetDqSNBVAYTArtsSYiJvj2lPfmEaq5kF5WeKGi7jramW+eZmAS1EexHWNPDzcJ/AsFpfaX7MUWicB12EpF1oll6vac4Fbb2q4xFiKz/SsXaWD6tu+aWdI3OWYPWobz/k2/zR0PYjhG/fxcWFtLAzh67q6DMDqw1pSFdQOaRzhNPbl8TqtGJYSHCtfN+jyBbmEhO+fILvfKbtZyIk/KXrF0NAsFtlvbTJKB/sd4O8BjbPbYcSRj/WgwiYYdtgTfFFjm6zG/hdjfv6yAIaSrRE6WdA+p+EcEhtPSvpMurVHRgrinORqkLmiBVnE81sfx4aru7kPrWkhVvcbtmcU8wRSSmnvLsFe6ffRbOMJG4GsxaojbWEQ==",
              "sessionId": "08ecef13-83db-40b6-9961-2fc64c2f9fd6"
            }
          },
          "isDisabled": false,
          "paymentOptionKey": "adyen_credit_card",
          "paymentOptionProvider": "adyen"
        }
      ]
    }
  }
}

Show Adyen components

All Adyen Components require a properly configured instance of AdyenCheckout. This instance must be initialized using the initializationData provided in the previous state response—typically the response from the Select Payment Option call.

The general configuration of AdyenCheckout should also include an onSubmit handler, which must be implemented. This callback is triggered when the customer clicks the Pay button on the component. Within this onSubmit handler, you are expected to call your Order Confirmation endpoint.

The response from the confirmation endpoint will contain updated payment configuration details, most importantly an Adyen Action. This action object must be passed back to the Adyen Component using its handleAction method, allowing it to proceed accordingly.

From this point onward, the flow may vary depending on the specific payment method being used.

import { AdyenCheckout } from '@adyen/adyen-web'
import '@adyen/adyen-web/styles/adyen.css'

const selectedPaymentOption = orderState.payment.selected[0];
const { initializationData } = selectedPaymentOption.configuration;
const { clientKey, sessionId, sessionData, paymentMethodsResponse } =
  initializationData;

const configObj = {
  environment: "test",
  locale: "en-US",
  countryCode: "DE",
  clientKey,
  session: { id: sessionId, sessionData },
  paymentMethodsResponse,
  onSubmit: (state, component) => {
    if (state.isValid) {
      const { paymentMethod, origin, browserInfo } = state.data;

      fetch(
        "https://checkout.scayle.cloud/next/api/co/v3/state/order/confirmation/execute",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer {AUTH_TOKEN}",
            "x-shop-id": "{SHOP_ID}",
            "x-device": "desktop",
          },
          body: JSON.stringify({
            data: {
              paymentOptionKey: selectedPaymentOption.paymentOptionKey,
            },
            referer: "https://your.shop/checkout",
            specification: {
              paymentMethod,
              origin,
              browserInfo,
            },
          }),
        }
      ).then((response) => {
        response.json().then((state) => {
          const adyenAction =
            state.orderState.payment.selected[0].configuration
              .initializationData.action;
          component.handleAction(adyenAction);
        });
      });
    }
  },
  onError: (error) => {
    console.error("Adyen Error:", error);
  },
};

try {
  const adyenCheckout = await AdyenCheckout(configObj);
  // Load payment specific component here
  // You can find examples in the next sections
} catch (error) {
  console.error("Failed to initialize Adyen:", error);
}

Adyen Credit card

The component can be configured based on the official documentation.

Please note, that the holderName needs to be always requested

<div id="card-container"></div>

import { Card } from '@adyen/adyen-web'

const cardConfiguration = {
  hasHolderName: true,
  holderNameRequired: true,
};

const card = new Card(adyenCheckout, cardConfiguration).mount(
  "#card-container"
);

Adyen ApplePay

The component can be configured based on the official documentation.

<div id="applepay-container"></div>

import { ApplePay } from '@adyen/adyen-web'

const adyenCheckout = await AdyenCheckout(configObj)

const applePayPayComponent = new ApplePay(adyenCheckout);
applePayPayComponent.mount("#appleepay-container");

Adyen GooglePay

The component can be configured based on the official documentation.

<div id="googlepay-container"></div>

import { GooglePay } from '@adyen/adyen-web'

const adyenCheckout = await AdyenCheckout(configObj)

const googlePayComponent = new GooglePay(adyenCheckout);
googlePayComponent.mount("#googlepay-container");