#viacheslav_68834
stiff pivot
broken violet
Yes you'd need to complete re-initialise the Stripe.js instance
But it seems that after recreation and reinitialization of my Element with another API Key it breaks 3D Secure Challenge as it starts several times simultaneously (number of times is equal to number of created Elements in past) and it leads to card authorization failure.
This ultimately sounds unrelated to the API key but I'd need to see a reproduction and some code to understand better
austere hedge
I hope it's doable, but it seems my variant does not work, because it breaks 3DS challenge flow, producing multiple confirms which leads to fail
Could you please help to tune it?
broken violet
Not really sure what you're showing me in that screenshot? Looks like your itegration is just calling confirmSetup multiple times?
austere hedge
Hm, may be you're right. Let me check the code
broken violet
Are you disabling thye button after it's submitted?
austere hedge
Speaking about my own submit button (super submit of whole form), yes, it's being disabled.
Also, the problem occurs only when I recreate/reinitialize Elements and number of "confirm"s in Stripe dashboard equals to number of initializations.
Here is my application of Elements
Webpage calls it in such way
broken violet
Yeah I'd guess that your code isn't actually working as you expect. Is this some kind of JS framework?
austere hedge
This is not a framework
broken violet
Any reason why you're not using loadStripe from the Stripe.js module? https://github.com/stripe/stripe-js
Should be easier for you to re-initialise that way
austere hedge
Thanks, I didn't know about this, not found in API documentation
austere hedge
How do you think, will it help me with problem with recreation of Stripe?
It looks like some issue is in Element itself, as it kinda produces multiple 3ds requests. (in case of recreation)
broken violet
Well, for example, it's easier to memoize a loadStripe instance dependent on a key. If that key changes (i.e. the API key), re-initialise
broken violet
It looks like some issue is in Element itself, as it kinda produces multiple 3ds...
Again, I'm just guessing the root issue here based on the limited info and context you've shared
If you have an actual reproduction I can use, then I may be able to suggest alternatives
I wonder if you're re-initializing Stirpe.js whilst some calls/functions are still in-flight
austere hedge
Need to check that
broken violet
Webpage calls it in such way
Like I don't really understand this Ajax call
Clearly whenever that resolves, it's re-initializing but when does it actually do
Also, what's the use case for switching API keys?
austere hedge
Actually, here is some case to see the issue in action, if you have some time
- https://dev.store.altium.com/flowmanager/flow/start?ProductId=ADTB072020
- Proceed with Login viacheslav.yushkov+se7@altium.com password Flowers0
- Select some different countries in combobox to recreate Elements several times. Suggested chain: Australia, Germany, UK, India, Japan...
- Enter test card number with obligatory 3DS: 4000000000003220 and some date/cvv, press submit.
- 3DS flow will start in a strange way and will produce failure and multiple confirmation requests...
austere hedge
Also, what's the use case for switching API keys?
This is a good question. We have multiple entities for different regions of the world. For new customers we cannot know their entity until he specifies their country.
broken violet
We do have a beta that adds an .update() method to the Stripe object to update the API key conditionally
But I want to be sure that's the issue first
broken violet
We do have a beta that adds an `.update()` method to the Stripe object to update...
Will also prevent that reload of the Element you see on your checkout page. See the demo: https://elements-demo.vercel.app/demos/pe-multi-accounts
Ok, I can reproduce. I think your re-initialize is firing too early before the payment has actually succeeded. You can see the page change behind the 3DS/auth dialog
Can you put some logs in that method to confirm?
austere hedge
Sure, will check it now
Cannot confirm it. Added console.logs to there. Reinitialization is being happened only in the moment of country switch. During 3DS flow there aren't any reinitializations noticed.
broken violet
It seems to me like something else is calling confirmSetup. Can you log inside your Submit method?
Hence why there is 2 dialogs
austere hedge
Sure
broken violet
If you look in the network tab when you click 'pay' you can see 2x 3DS requests to an authenticate endpoint (our API)
That indicates confirmSetup is called twice
Seeing if I can find any logs internally
austere hedge
Thanks for finding that. Let me check.
broken violet
Ok, I found those 2x requests I just saw:
Both made on the same Setup Intent and the same time
Interestingly using the same API key, which would suggest that it's not Stripe.js being re-initialized
Something has to be firing confirmSetup a 2nd time
austere hedge
I really appreciate you for this finding. It can be the source of issues. My test showed that "submit" is being called 5 times. Need to check this deeply.
broken violet
Great, progress! Definitely sounds like the problem
austere hedge
It looks like my idiotic typo wasted a lot of your valuable time. Thank you and sorry for that.
This is in fact the call of MyPageClass.Init() instead of StripeElement.Init().
broken violet
haha, all good! Helps to rubber duck