Pesquisar

Are you looking for test card numbers?

Would you like to contact support?

Atenção, esta página não se encontra disponível em Português
Default icon

Migrate to Web Components 4.0.0

Find out more about the major changes in this release.

To be able to use Web Components 4.0.0, make sure your integration contains the changes described on this page.

Required API version

Using Web Components 4.0.0 requires Checkout API v67 or later.

The origin key is no longer supported

Web components initially used the origin key for client-side authentication. Web components 3.10.1 introduced the client key as a better alternative. Starting Web Components 4.0.0, only the client key is supported.

If you are still using the origin key, find out how to switch to using the client key. You can also have a look at our example integrations on GitHub which are already using the client key.

Component configuration overrides all other configuration

Starting Web Components 4.0.0, configuration on the component itself overrides all other configuration. Before Web Components 4.0.0, paymentMethodsConfiguration used to override all other configuration.

For example, onSubmit configuration inside the card component overrides all other onSubmit configuration, while onSubmit configuration inside paymentMethodsConfiguration only overrides global configuration:

const checkout = new AdyenCheckout({
    onSubmit: () => {}, // Global configuration for onSubmit
    paymentMethodsConfiguration: {
        card: {
            onSubmit: () => {}, // Configuration for card payments overrides global onSubmit configuration.
        }
    }
});

checkout.create('card', {
    onSubmit: () => {}, // Component configuration overrides all other onSubmit configuration.
});

Drop-in now only accepts props related to itself

Drop-in now only accepts props related to itself. You must set generic or component-specific configuration either on the main instance, AdyenCheckout, or in the paymentMethodsConfiguration object.

Any configuration on paymentMethodsConfiguration overrides configuration set globally, on AdyenCheckout.

const checkout = new AdyenCheckout({
    onSubmit: () => {}, // Global configuration for onSubmit
    paymentMethodsConfiguration: {
        card: {
            onSubmit: () => {}, // onSubmit configuration for card payments. Overrides the global configuration.
        }
    }
});

checkout.create('dropin', {
    onReady: () => {}, // Drop-in configuration only has props related to itself, like the onReady event. Drop-in configuration cannot contain generic configuration like the onSubmit event.
});

Configure aria labels through translation fields

Starting Web components 4.0.0, aria-label attributes are read from translation fields.
Configuring aria-label attributes using the ariaLabels field inside the component is no longer supported:

const translations = {
    "en-US": {
        "creditCard.encryptedCardNumber.aria.iframeTitle": "Iframe for secured card number",
        "creditCard.encryptedCardNumber.aria.label": "Card number field",
        ...
    }
};
const customCard = checkout.create('securedfields', {
  ...
  ariaLabels: {
    lang: "en-GB",
    encryptedCardNumber: {
      label: "Card number field",
      iframeTitle: "Iframe for secured card number"
    },
    ...
  }
  ...
}).mount('#customCard-container');

Deprecated props have been removed

In some cases, there were two different props that served the same purpose. For example, for card payments, you could use either groupTypes or brands to specify the card brands to be accepted by your component. Starting Web Components 4.0.0, the deprecated groupTypes prop is removed and only the newer brands prop is accepted.

Card component and Custom card component

Some deprecated props were removed, so make sure your integration uses the remaining props:

Removed prop Prop to use instead
groupTypes brands
size challengeWindowSize
ariaLabels No longer supported. Use translation fields instead.

Apple Pay component

Some deprecated props were removed, so make sure your integration uses the remaining props:

Removed prop Prop to use instead
amount amount.value
currencyCode amount.currency
configuration.merchantDisplayName configuration.merchantName
configuration.merchantIdentifier configuration.merchantId

Google Pay component

Some deprecated props were removed, so make sure your integration uses the remaining props:

Removed prop Prop to use instead
showButton showPayButton
merchantIdentifier merchantId

IssuerList component

If you are configuring a list of issuers using the IssuerList component, make sure you use the issuers prop.

This applies to the following payment methods: iDEAL, Entercash, Dotpay, MOLPay, EPS, OpenBanking UK, Online Banking India, and Indian wallet or online payments through Billdesk or PayU.

Removed prop Prop to use instead
items issuers

PayPal component

Some deprecated props were removed, so make sure your integration uses the remaining props:

Removed prop Prop to use instead
intent configuration.intent
merchantId configuration.merchantId