#cocochief - elements
tepid plinth
No - we have not made any changes. You can see it on our test site account-dev.wonsterwords.com.
It looks like the error is coming from within Stripe js script.
Feel free to go through our site. It's pointed at stripe test mode, so the test cards would work.
I can't even tell which element it is complaining about.
karmic ferry
I'm not able to access that site, is the url correct?
tepid plinth
then hit "Start Free Trial" and go through the process. You can use any fake email address.
karmic ferry
Setup looks to have succeeded for me: seti_1KHEZQHHxiXor07sxz6a5T8j
tepid plinth
Yes, our code does a setup intent before capturing payment. Here is where the error is
when you enter the CC info.
and the system tries to actually setup the default payment.
karmic ferry
Yes, that succeeded for me and i did not hit errors
if you load that setup intent you should see it succeeded
tepid plinth
mmm... it fails for me everytime.
karmic ferry
can you try in private/incognito mode? I wonder if something else is happening, possibly with extensions/plugin etc
tepid plinth
I just tried clearing all website data on one of my browsers (where it wasn't working before), and then it worked. But then when I go back and retry on another browser where I didn't refresh, it still didn't work. Let me try incognito.
karmic ferry
You may have something going on with local storage and stale references to elements
tepid plinth
So I tried incognito on the browser where it wasn't working (Chrome on Mac), and it works in incognito.
What do you mean by stale references to elements?
We do use localStorage for some of our own JS code, but we have no code the renames elements that could be causing this...
karmic ferry
The integration error you're seeing suggests you have a reference to an element (probably the cardElement) that no longer exists in the DOM. It's hard to say why you'd have that but if you share your code related to setting up and handling the card element we might be able to offer some suggestions
tepid plinth
hang on. let me send you the source.
The place where it is having issues is in payments.js.
upbeat bison
Hi 👋
We cannot look at all of your code but if you could put the specific code handling your element in a code block (three ` on each end) that would. be helpful
tepid plinth
hang on...
OK - I just did an update to the code trying to fix the issue. And it didn't work. Here it is.
Here is the error.
Here is the code around line #379.
upbeat bison
Could you share the code that defines the cardElement referenced here?
tepid plinth
Earlier in the file, I have
let stripe, cardElement;
stripe = Stripe(getPublishableKey());
.....
const elements = stripe.elements();
cardElement = elements.create('card',elementStyles);
cardElement.mount('#card-element');
And here is the section from the html file.
upbeat bison
Could you console.log the cardElement variable immediately before you call confirmCardSetup?
Examining the object can tell us a fair amount.
upbeat bison
Please do not log a string, just the object
This will allow you to inspect the object in the console
upbeat bison
Okay. So see the _parent attribute? It should be the div you mounted the card to.
For some reason this is removed from the DOM prior to confirmCardSetup
tepid plinth
mmm... Any idea why that could happen? Or is that something we are doing?
upbeat bison
Thats part of the page you control.
Any chance you are calling element.unmount()?
Or is any part of your code removing the parent div?
Are you removing <div id="card-element"> or <div id="ccard-details">?
Follow up: Does your app change anything about the page when you call loading(true)?
tepid plinth
Sorry.
Had to take a call. Just got back. Let me check.
I found this. Could this be the culprit?
Yeah, this is it. I took this out and the error went away...
So, to help me better understand this - what's wrong with swapping 2 divs like this?
azure wasp
You can't remove the parent div that you mount the element into because we use it to mount our iframe and link to it, so you have to have that div stay present in the DOM