#crsmith0511
gloomy hearth
Hi there
Can you walk me through the exact steps that are happening here?
This is indeed going to be a bit challenging without the ability to reproduce on our side
But if you can break it down then I may be able to help
To be clear, the cookie errors you are seeing are unrelated and we are already aware of those and working on that. But that isn't going to be the issue here.
waxen slate
It is a very specific order you have to do to get to that state:
Click add payment button
Card and address element mount
Fill out the info and save payment
The card and address element disappear from the screen once it is processed
The user immediately clicks on the add payment button again and when the element mounts it has an error
This is getting called that is the on different call:
` if (elements.getElement('payment')) {
this.cardElCompleted = false
this.addressElCompleted = false
// if the card and address elements exists destroy them and create new ones
if (elements) {
this.cardEl = elements.getElement('payment')
this.addressEl = elements.getElement('address')
this.cardEl?.destroy()
this.addressEl?.destroy()
}
}`
Okay that is super helpful to know that I can not focus on the cookie error. It is slightly different than ones we have seen in the past because the ones we have seen before did not include the errors.stripe.com url to click on
gloomy hearth
So after you unmount Payment Element and Address Element and then click "add payment" again you are seeing them pop up and immediately you see the validation errors that you provided in the screenshot?
waxen slate
Yes that is true
gloomy hearth
Okay what does your code look like after you call .destroy()?
How are you re-creating/remounting?
waxen slate
` this.cardEl = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: false,
spacedAccordionItems: true,
},
wallets: {
applePay: 'never',
googlePay: 'never',
},
})
this.addressEl = elements.create('address', {
mode: 'billing',
autocomplete: {
mode: 'disabled',
},
defaultValues: {
address: {
country: 'US',
state: 'Select',
},
},
})
// event.complete will not be true until all fields are valid
// add else for when errors.length we bubble uncompleted fields back up
this.cardEl.on('change', (event) => {
if (event.complete) {
this.cardElCompleted = true
} else {
this.cardElCompleted = false
}
})
this.addressEl.on('change', (event) => {
if (event.complete) {
this.addressElCompleted = true
} else {
this.addressElCompleted = false
}
})
this.cardEl.mount(`#card-element_${this.cardFieldId}`)
this.addressEl.mount('#card-element_address')`
I am trying to get a url I can share with you. I know that would be way more helpful for you
gloomy hearth
Yeah that would indeed be a lot easier
Okay where in your code are you calling await addressElement.getValue();?
I think what is happening is that you are likely calling that somewhere before the Address Element is actually complete
Which is triggering the validation error to show
waxen slate
I am not calling that any where
waxen slate
Here is a test envirnoment you can go to. It is a free render instance so it might take a second to load for you
To get where you need to:
Click Create an account
Select Skilled Trades exam and then any test
Fill out the create account info. Make sure to click create password and fill that out
Choose the free plan and click start studying
Once you are on our home page click your name or username in the right corner of the nav
Click on settings
Once on the settings page on the left hand side click purchases and this is where you will see the add payment button
gloomy hearth
Okay I'm there
So now I do what to trigger the issue? I successfully put in card details then try to enter card details again?
Ah okay yeah
That did it
So when I attempt to add a second card
It triggers the validation error
waxen slate
That is correct
gloomy hearth
K give me a minute to play with it
night sirenBOT
gloomy hearth
@waxen slate do you happen to call .focus() anywhere?
This is really tricky due to the code being minimized on your site
gloomy hearth
Okay @waxen slate after messing with my own sample I was able to reproduce what you are seeing. As far as I can tell right now it seems we aren't properly destroying the state here after the first confirmSetup() and that is causing the validation to be triggered again for some reason. Not super clear on why but I'll need to file a bug report internally for further inestigation on that. In the meantime, can you try something for me?
Instead of calling .destroy() when you click "add Card" the second time, try destroying the Element right after you confirmSetup() resolves and then just create it again on "add Card". I'm curious if that will be a short-term fix here.
waxen slate
Okay - that makes senses. I will try that in my code.
Really thank you so much for your help and effort at looking at this!
night sirenBOT
gloomy hearth
No problem. Give that a try and let me know
waxen slate
Okay - I got it working I had to put it at a higher level in our code because we are using a helper method to do const stripe = await loadStripe(envKey) which multiple components need and to reduce redundant code. So instead of calling elements.getElement('address') then .destroy() then .create() in the mount we can just do the .create() because we know any the helper method we are starting with no address element. I am not sure if that makes senses, but your thought of putting it after confirmSetup() helped me think about getting it to a higher level in the code - thank you
prime swallow
Great to hear it's working!