Comments (8)
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?
from adyen-web.
@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
from adyen-web.
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?
from adyen-web.
@sponglord Yes, with the exact same configuration.
from adyen-web.
@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
?
from adyen-web.
@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
from adyen-web.
@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 ([email protected]) 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
from adyen-web.
@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
from adyen-web.
Related Issues (20)
- `showPayButton` not working for stored ACH HOT 2
- Slash not allowed in Street and House number fields in Drop-in HOT 5
- `undefined is not an object (evaluating 'this.touchendListener')` error on Safari HOT 2
- [Web - DropIn] On iOS Safari, scanning a card is entering the wrong expiryDateField
- Ideal issuer list not showing in webcomponent HOT 3
- [Web Drop-in] Trouble generating a boleto in test account. HOT 1
- More flexibility for installmentOptionMonths HOT 2
- Placeholder text is not vertically centered when using a custom font HOT 2
- Return some method to understand the Checkout version before initialization HOT 3
- Click to pay card image size can have invalid size in some cases HOT 3
- Unmounting and remounting secured fields destroys card brand image element. HOT 8
- Updating the translation for 'installments' doesn't add a label above the installments drop-down HOT 2
- Runtime error caused by `@babel/runtime-corejs3` & `core-js-pure` HOT 4
- challengeWindowSize not respected on 3ds component via createFromAction HOT 20
- Prevent CTRL+C and mask Credit Card input HOT 1
- `Uncaught (in promise) TypeError: getIP() is undefined` thrown in `risk.1.0.0.js` HOT 1
- Setting an invalid shopper country code on payment session breaks checkout HOT 3
- option to choose how to open 3ds payment site HOT 1
- Disable autofocus on first field in error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from adyen-web.