Translations revert to US after switching

[RobKega]

Describe the bug
When using localisation we noticed that after switching payment methods and re-mounting the a component, the translations are gone and are reverted to english.

To Reproduce
Steps to reproduce the behavior:

1. Go to checkout page
2. Click on first available payment method
3. Click on second payment method and then the first again
4. Translations are not there anymore

Expected behavior
Strings are still in the language/locale of the configuration

Additional context
We are using version 5.22 of the adyen-web module in a React frontend.

[sponglord]

Hi @RobKega - can you give us some more details of your implementation?
Are you using the Dropin to display a list of payment methods or are you generating your own list and then mounting individual components when the shopper makes a selection?

[RobKega]

@sponglord We are using individual components, the switch happens after the second time a component is mounted, configuration is built every time using the correct locale.

Another issue we are having is that the showPayButton config directive does not work all the time, if we set it globally to false, enabling them per payment method does not work (for paypal and applypay for instance). But if we globally enable them (or don't set them specifically) , disabling them for certain payment methods doesn't work. I feel somehow these things are connected since it both involves the component not adhering to configuration

[sponglord]

We are using individual components, the switch happens after the second time a component is mounted, configuration is built every time using the correct locale.

@RobKega - Are you rebuilding AdyenCheckout every time you unmount a component?

[RobKega]

@sponglord Yes, with the exact same configuration.

[sponglord]

@RobKega - why do you need to re-create AdyenCheckout every time?
The expected way to do what you want to do would be to keep the same instance of AdyenCheckout.

And when you are mounting a component for a second time - are you keeping a reference to that component and calling it's mount function? Or are you making a new instance using AdyenCheckout.create?

[RobKega]

@sponglord The AdyenCheckout is recreated every time because React will do a re-render of the component and the instance will be reinitialized. Same goes for the checkout component

[sponglord]

@RobKega - I'm afraid I don't understand your implementation, and the reasoning behind re-creating Checkout every time.

Nonetheless, I created an example in React that reinitialises Checkout (with an non US language) and a new Component on every mount, and I can't recreate your issue.

I would recommend contacting adyen support (support@adyen.com) who will be able to walk through your implementation with you to understand the issue.

As an addition though, I would say that somewhere in your re-rendering process you must be losing the reference to the shopperLocale value that is used to configure Checkout and set the language. Either that or 'shopperLocale' is being set to an unrecognisable value. These are the only reasons that a freshly rendered AdyenCheckout would fallback to the default English language setting

[RobKega]

@sponglord The reasoning behind the recreation is that that part of the checkout is a single component that sort of works like an accordion where the customer can choose his/her desired payment method and fill in the data of that specific payment method. Lots of actions trigger re-renders and that is why the checkout is rebuilt every time