FAQ

How to debug data flow?

To debug the data flow, open the Network tab in the browser's devtools. Each payment request will have a commercetools Payment object (opens new window) in the response. You can check custom.fields to see the data sent to Adyen and a list of all available custom fields on the commercetools-adyen-integration (opens new window) repository.

Error: `NotFound: URI not found: /<project_name>/carts/<cart_id>`

The NotFound: URI not found: /<project_name>/carts/<cart_id> error is thrown when the ctApi.apiHost property in middleware.config.js file contains wrong path. Make sure it's in the https://<SHOP_DOMAIN>.com/ format instead of https://<SHOP_DOMAIN>.com/<project_name>/graphql.

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:3000 to the URL of your staging environment.

Structure of DetailsRequest contains the following unknown fields...

Update extension and notification modules to the newest available version (opens new window) by updating the tag in extension.Dockerfile and notification.Dockerfile.

What if a user modifies the cart's total price during the payment flow?

The cart's total price is compared to the payment's amount in every step of the payment flow. If it doesn't match:

process is immediately stopped,
payment object is removed from the commercetools,
user is redirected back to the payment step,
notification about the mismatch is displayed to the user.

How will the component recognize if a user had a price mismatch during the 3DS1 flow?

The component looks for the route's query parameter called adyen-err. If its value equals malformed-price, the user had a price mismatch.

Examples:

# User had a price mismatch
http://localhost/checkout/payment?adyen-err=malformed-price
# User hadn't a price mismatch
http://localhost/checkout/payment?adyen-err=something-diff
http://localhost/checkout/payment

Displaying custom component if the total price has been malformed during the payment flow

You can replace a default container with a slot named price-mismatch.

<PaymentAdyenProvider
  :afterPay="afterPayAndOrder"
>
  <template #price-mismatch>
    <div class="my-error-class">
      Price malformed! Please provide payment data once again!
    </div>
  </template>
</PaymentAdyenProvider>

Displaying custom component if the payment has been refused

You can replace a default container with a slot named payment-refused.

<PaymentAdyenProvider
  :afterPay="afterPayAndOrder"
>
  <template #payment-refused>
    <div class="my-error-class">
      Payment refused! Please try again.
    </div>
  </template>
</PaymentAdyenProvider>

Does this integration support checkout.com?

Adyen's module isn't compatible with checkout.com's module (opens new window).

Invalid URL: /api/adyen/afterAuthRedirectBack while requesting POST /api/adyen/makePaymentRequest

integrations.adyen.origin field in middleware.config.js does not contain proper URL.

Adding custom payment fields

To add fields to the payload sent to the POST /payments (opens new window), add the buildCustomPaymentAttributes function in middleware.config.js.

interface BuildCustomPaymentAttributesParams {
  apiClient: any, // Client instance from https://commercetools.github.io/nodejs/sdk/api/sdkClient.html
  requestBuilder: any, // Request builder from https://commercetools.github.io/nodejs/sdk/api/apiRequestBuilder.html
  cartId: string,
  paymentId: string
};

interface AdyenConfig {
  // ...
  buildCustomPaymentAttributes: (params: BuildCustomPaymentAttributesParams): Promise<Record<string, any>>
}

Object returned from this function will be added as a part of the payload. However, it doesn't allow to override fields like: additionalData, amount, applicationInfo, browserInfo, channel, merchantAccount, metadata, origin, paymentMethod, reference, returnUrl.

Example of setting some cart custom field as a `merchantOrderReference`

// middleware.config.js
{
  // ...
  adyen: {
    location: '@vsf-enterprise/adyen-commercetools/server',
    configuration: {
      // ..
      async buildCustomPaymentAttributes ({ apiClient, requestBuilder, cartId }) {
        const uri = requestBuilder.carts.byId(cartId).build();
        const cart = (await apiClient.execute({
          uri,
          method: 'GET',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          }
        })).body;
        
        return {
          merchantOrderReference: cart.custom.fields.SOME_VALUE
        }
      }
    }
  }
}

How to enable recurring payments (saving cards)?

Recurring payments are described in the Saving customer cards section.

Can I make some check just before payment authorization?

Yes, you can use beforePay props of PaymentAdyenProvider.vue component. If you return false there, then payment won't be authorized, Adyen drop-in will be remounted, and error will appear.

beforePay is called inside both onSubmit and onAdditionalDetails of Adyen Drop-in's hooks. There is a second parameter that tells from where function has been called:

(stateData: any, adyenHookName: 'onSubmit'|'onAdditionalDetails') => Promise<stateData>

onSubmit and onAdditionalDetails are hooks of Adyen Drop-in (opens new window).

If you want to customize error use payment-refused-by-beforePay named slot.

Error: `Insufficient scope. One of the following scopes is missing: view_orders`

Inside middleware.config.js, the key provided in integrations.adyen.configuration.ctApi property requires view_orders scope. Also, make sure it is present inside scopes array.

← API

Changelog →

FAQ