Search

Are you looking for test card numbers?

Would you like to contact support?

Migrating to version 3.0.0

Learn about the changes when you upgrade to Web Drop-in or to Web Components version 3.0.0.

Use this guide to compare implementation differences if you are:

  • Migrating from Web Components version 2.5.0 and earlier to Web Components version 3.0.0.
  • Switching your integration from Web Components version 2.5.0 and earlier to Web Drop-in.

API version

Drop-in requires v49 of the /paymentMethods, /payments, and /payments/details endpoints. If you want to change your integration from Web Components to Web Drop-in, you need to update your endpoint version to v49.

If you are migrating from Web Components version 2.5.0 and earlier to Web Components version 3.0.0, we strongly recommend that you also update your endpoint version to v49.

New configuration property

We introduced the new environment property in version 3.0.0. This replaces the loadingContext config property used in versions 2.5.0 and earlier. Instead of specifying the domain, you only need to pass either test or live to set the environment.

const checkout = new AdyenCheckout({
    ...
    environment: 'test' // This will use 'https://checkoutshopper-test.adyen.com/checkoutshopper/'
});
const checkout = new AdyenCheckout({
    ...
    loadingContext: 'https://checkoutshopper-test.adyen.com/checkoutshopper/'
});

Change in state.data object

The state.data object returns the shopper's payment details information that you need to pass to your /payments request.

Starting from version 3.0.0, the state.data object returns the entire paymentMethod object that you will need to pass to the /payments request. In previous versions, the state.data only includes properties that you pass in the paymentMethod object of your /payments request.

const ideal = checkout.create('ideal', {
    onChange = (state, component) => {
        state.data // { paymentMethod: { type: 'ideal', issuer: '1121' } }
    }
});
const ideal = checkout.create('ideal', {
    onChange = (state, component) => {
        state.data // { type: 'ideal', issuer: '1121' }
    }
});

Change in isValid method

The isValid method in version 3.0.0 is now a getter. In previous versions, the isValid is a function.

  component.isValid // true/false
  component.isValid() // true/false