If your checkout is using Adyen Web Components and certain card brands (like Discover) are not being accepted or recognized in the card form, the issue may be caused by a missing configuration in your Card Component initialization.

This article explains why this happens and how you can quickly fix it.

Why some card brands may not be recognized

The Adyen Card Component determines which card schemes it should recognize based on the brands configuration.

If you do not explicitly configure this property, the component only recognizes the default brands:

['mc', 'visa', 'amex']

This means that other supported brands, such as Discover, may not be recognized correctly in the checkout form.

You can learn more about the brands configuration in Adyen’s official documentation:
https://docs.adyen.com/payment-methods/cards/web-component/?tab=advanced-requirements_2

Common symptoms

You might notice one or more of the following behaviors:

Discover cards appear invalid when entered
The card brand icon does not update
Some cards (Visa/Mastercard) work but others do not
Customers report their card cannot be used even though you support it

If this sounds familiar, your Card Component may not include all supported brands.

How to fix the issue

Update your Card Component configuration to include the brands you want the component to recognize.

For example, if you support Discover cards, add it to the brands list.

Example configuration (Adyen Web v6)

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

const checkout = await AdyenCheckout({
  clientKey: 'YOUR_CLIENT_KEY',
  environment: 'test',
  session
});

const card = new Card(checkout, {
  brands: ['mc', 'visa', 'amex', 'discover']
});

card.mount('#card-container');

Example configuration (Adyen Web v5 and earlier)

If you are using an earlier version of Adyen Web:

const checkout = await AdyenCheckout({
  clientKey: 'YOUR_CLIENT_KEY',
  environment: 'test',
  session
});

const cardConfiguration = {
  brands: ['mc', 'visa', 'amex', 'discover']
};

const cardComponent = checkout.create('card', cardConfiguration);
cardComponent.mount('#card-container');

How to check if this is your issue

Review your card component initialization.

If it looks like one of these examples, the brands property may be missing.

Example missing configuration

const card = new Card(checkout);

const cardComponent = checkout.create('card');

const cardConfiguration = {
  brands: ['mc', 'visa', 'amex']
};

In these cases, Discover will not be recognized.

What your configuration should include

Add the card brands you want the component to support.

Example:

brands: ['mc', 'visa', 'amex', 'discover']

You can also include other supported schemes depending on your setup.

Important: Make sure the payment method is enabled

Adding a brand to the component only allows the frontend to recognize the card. The payment method must also be enabled on your Adyen merchant account.

If Discover is not enabled for your account, the payment will still fail even after updating the configuration.

Additional resources

Adyen documentation for the Card Component (including configuration options and examples for different versions):

https://docs.adyen.com/payment-methods/cards/web-component/?tab=advanced-requirements_2

If your checkout still does not accept certain card brands after updating the configuration, review the payment methods returned by your /paymentMethods or /sessions request to confirm the card scheme is available for the transaction.

Discover (or Other Card Brands) Not Accepted in Adyen Web Card Component