Production build not working with @adyen/adyen-web/auto

[tlenclos]

Describe the bug
Hello ! We are in the process of migrating the library from 5.59.0 to 6.1.0 and we use Vite to build our project.

It seems that the @adyen/adyen-web/auto export doesn't work as expected since we encounter these messages when running the production build and the Dropin does not show :

Dropin: You support the payment method 'scheme' but this component has not been configured. Make sure to import the Class 'Card' and then pass it in the Dropin's 'paymentMethodComponents' config property if you wish to offer this payment method.

It works fine with the dev server.

To Reproduce
Steps to reproduce the behavior:

1. Build an app with vite and use @adyen/adyen-web/auto
2. Mount dropin with just payment methods configurations

import { AdyenCheckout, CoreConfiguration, Dropin, DropinConfiguration } from '@adyen/adyen-web/auto';

const paymentMethodsConfiguration: DropinConfiguration['paymentMethodsConfiguration'] = {
    card: {
        autoFocus: true,
        enableStoreDetails: true,
        hasHolderName: process.env.REACT_APP_ADYEN_HOLDER_NAME === 'true',
    },
};

new Dropin(checkout, {
    paymentMethodsConfiguration,
}).mount(container.current);

Expected behavior
Dropin should show.

Additional context

• "vite": "^5.1.6"
• "@adyen/adyen-web": "6.1.0"

[ribeiroguilherme]

Hey @tlenclos ,

Can you by any chance provide a reproducible example and share with us? That would be the easiest way for us to investigate. Perhaps create a minimal Github repo with your setup, which we can build and start a local server serving the static files (no need to make APi calls, those can be mocked). Otherwise it is hard to troubleshoot this.

We have tested the auto on production build and it seem ok. We have an example using Nextjs which you can run the production build locally, and it works fine. (you can try it out here)

Can you also tell me what do you get when you run window.AdyenWebMetadata in the browser console using your prod version?

[tlenclos]

I'll see if I can make a reproducer.

In the meantime, I got this when running window.AdyenWebMetadata :

{
    "version": "6.1.0",
    "bundleType": "eslegacy"
}

We are not using Next.js, just Vite with an SPA app. Even though we are importing like so :

For example I had to add Twint and setup it manually in order to display it, and we need automatic setup without explicitely requiring payment methods.

import {
    AdyenCheckout,
    CoreConfiguration,
    Dropin,
    DropinConfiguration,
+   Twint,
} from '@adyen/adyen-web/auto';

...

new Dropin(checkout, {
  paymentMethodComponents: [Twint],
  paymentMethodsConfiguration,
}).mount(container.current);

[ribeiroguilherme]

It seems like the module resolution mechanism of your application is ignoring the 'auto' bundle path and doing the fallback to the 'eslegacy' bundle type, which is usually used with setups that are using Webpack 4 for example. By seeing the "eslegacy" , I can tell that the "auto" mode is not being loaded indeed.

You mentioned Vite with an SPA - can you elaborate a bit more on this setup? Are you using Webpack 4 by any chance or any other bundler? This SPA - how was it generated?

I'd like to help you here and investigate this further, but it is hard without having an reproducible repo with the proper dependencies that you are using. Do you think it is possible to provide a bare minimum project skeleton with the project dependencies, so we can take a closer look into it? No need to implement any code into it - just scaffold a repo that contains your dependencies and make sure that the web app starts when running npm start should be enough.

[bramdebouvere]

We also had the same issue in an Open-WC project (Lit + rollup + babel).

For now we worked around by importing the components from @adyen/adyen-web instead.
import { components } from '@adyen/adyen-web';

And in the function where we create our Dropin Configuration, we register the classes similar to how it's done in the "auto" import:
const { ...Components } = components;
const Classes = Object.keys(Components).map(key => Components[key]);
AdyenCheckout.register(...Classes);

[jellevdv]

Same issue here, the components don't seem to load using the /auto import 😥
We also used the same hack as above to fix the issue, we do have a fixed list of payment methods but can't seem to find the correct components for all of them, as the mapping is not 1:1.
Payment methods like UnionPay or JCB don't seem to be in the following components list https://github.com/Adyen/adyen-web/blob/main/packages/lib/src/components/index.ts

[ribeiroguilherme]

@tlenclos here is a code repo using Vite 5.1.6 with the auto package with some mocked payment methods: https://stackblitz.com/edit/vitejs-vite-w7iztm?file=main.js - can you let me know if I am missing something?

@bramdebouvere could you provide a small reproducible example (same as I shared above using 'stackblitz'), so we can have a look? That would be very helpful

@jellevdv can you share more details about your setup - which framework/bundler is involved? it would be great too if you can provide an example for us.
Regarding the payment methods that are not available in the list: most likely they are Redirect payment methods. We do not expose specific Components for Redirects. They must be created by doing new Redirect(checkout, { type: 'my-payment-type'});.

[sponglord]

@jellevdv More specifically UnionPay (SecurePay / UPOP) is a deprecated paymentMethod. Instead you shoudl be offering UnionPay (CUP) via the card component instead.
Likewise JCB can also be offered via the Card component.
In essence both UnionPay(Cup) and JCB are card brands that, if configured in the Adyen CustomerArea, will show up as supported brands when you present a Card component

[ribeiroguilherme]

@bramdebouvere here is an example using Open-WC project (Lit + rollup + babel): https://stackblitz.com/edit/openwc-lit-rollup-babel?file=src%2Fadyen-v6-demo.js - can you let me know what is missing in this case? The 'auto' seems to work as expected (once the dev server starts, it will take couple of seconds to render the UI)

[tlenclos]

@ribeiroguilherme yes in development mode it works properly, the issue is only in production with the build.
I don't think we can reproduce this on stackblitz ?

I downloaded the example on https://stackblitz.com/edit/vitejs-vite-w7iztm?file=main.js

Then ran in dev and prod respectively with npm run dev and npm run build && npx serve dist
Got the following :

[ribeiroguilherme]

@tlenclos thanks for checking it out. I missed the detail that it was impacting only prod build. I will take further look.
@bramdebouvere does the same apply for your case?

[tlenclos]

Hello @ribeiroguilherme, did you look into this issue again ? Let me know if I can be of any help. It's blocking us to upgrade to V6 for now.

[ribeiroguilherme]

Hi @tlenclos - Unfortunately I didn't have time to dig into this issue yet. I hope that by next week I will be able to investigate.

For now you can follow the workaround proposed here , it must work. And then once this issue is fix, you can just remove this code snippet

[bramdebouvere]

@ribeiroguilherme Sorry that I have not found the time to look at this yet. I'll try to free up some time soon.

[tlenclos]

I confirm that the suggested fix here is working for us too #2818 (comment)

[ribeiroguilherme]

@tlenclos @bramdebouvere we released v6.5.0 which contains a fix for this issue. Could you guys test it out and confirm the the issue is fixed? 🙏

[bramdebouvere]

@ribeiroguilherme Just tested this, seems to fix the issue here. Thanks!

[ribeiroguilherme]

@bramdebouvere thanks for checking it and for reporting the issue. I will close this thread. Cheers!