FAQ

Error: `The type with the key` ctp-adyen-integration-web-components-payment-type `was not found`

When you see The type with the key 'ctp-adyen-integration-web-components-payment-type' was not found error, you have to add new types and extensions to commercetools as described on these pages:

Klarna Pay Later doesn't work for the United States

Klarna Pay Later is not supported in the United States. However, sometimes it's added when you enable Klarna in Adyen's dashboard. If you have this problem, contact Adyen's support to remove it.

3DS2 Auth doesn't work in one environment

There might be a situation when you can finish 3DS2 Auth in the local environment but not in other environments, like staging. When this happens, make sure to change origin in the middleware.config.js from http://localhost to the URL of your staging environment.

Initiate a payment without a billing address

It's essential to understand that before initiating a payment, all necessary details, including the billing address, must be saved, as they play a crucial role in the process. This means not only saving the shopper's email, shipping details, and method, but also the billing details in the Commercetools.

Adyen Drop-in is not styled

We do not attach CSS for Adyen Drop-in out of the box as it might make it harder for you to style it your own way. If you want to use it anyway then you could learn more about it here.

Locally, I have issues with missing cookies

When you develop locally, in order to make cookies work correctly you need to implement reverse proxy to have frontend app under / (e.g. Nuxt), and Node middleware under /api. The following docker compose can easily solve this problem for you:

version: '3'

services:
  nginx:
    image: nginx
    container_name: vue-storefront-nginx-reverse-proxy
    volumes:
      - ./docker/nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    # Uncomment extra hosts below if you are using Linux. On OSX and Windows it should work out of the box.
    # extra_hosts:
    #   - "host.docker.internal:host-gateway"
    ports:
      - "80:80"

You need to create the following docker/nginx/nginx.conf file for it:

server {
    listen 80;
    server_name localhost;

    server_tokens off;
    proxy_buffer_size 128k;
    proxy_buffers 8 128k;
    proxy_pass_request_headers on;
    large_client_header_buffers 4 16k;
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Robots-Tag none;
    add_header X-Cache $upstream_cache_status;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $host;

    error_log  /dev/stderr;
    access_log /dev/stdout main;

    location /nginx_status {
      # Turn on stats
      stub_status on;
      allow 127.0.0.1;
      deny all;
    }

    location / {
        proxy_pass http://host.docker.internal:3000/;
    }

    location /healthz {
        access_log off;
        return 200 "OK";
    }
    location /api/ {
        proxy_set_header Host $host;
        proxy_redirect off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://host.docker.internal:8181/;
    }

    proxy_intercept_errors on;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
        internal;
    }
}

Then to run it, open 3 terminals.

In the first, run Frontend App on port 3000.
In the second, run Node app on port 8181.
In the third, run Docker compose (make sure port 80 is free).
Open http://localhost/.