#nael_address-element-chrome
lean flameBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1325867753617227826
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
quasi fjord
Hi 👋
I would not recommend using LLM suggestions.
What it sounds like to me is that you are attempting to mount the Address Element to the DOM before the element with the ID address-element exists.
forest spindle
Yes but how do people use the address element given that i followed the guide and it throwed the same error
quasi fjord
Which guide? Can you provide the link to the doc you followed?
I can confirm that I have multiple integrations using the Address Element. I wait to trigger the element.mount('#address-element') function until after the DOM has loaded.
forest spindle
Ok lemme check. thank you for your quick help
Actually i succeeded to remove the error
by using directly the React component from Stripe lib
useEffect(() => {
const initStripe = async () => {
const stripeInstance = await loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY);
setStripe(stripeInstance);
};
initStripe();
}, []);
const renderAddressElement = () => {
if (!stripe) return null;
return (
<Elements stripe={stripe}>
<AddressElement
options={{
mode: 'billing',
allowedCountries: ['FR'],
autocomplete: {
mode: 'google_maps_api',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
},
}}
onChange={(event) => {
setOrgData(prev => ({
...prev,
address: event.value
}));
}}
/>
</Elements>
);
};
but still got this:
failed to execute removeChild on Node: the node to be removed is not a child of this node
quasi fjord
Okay. Can you give me a little more detail on what is throwing that error?
Also, I recommend reviewing this integration guide and checking for any discrepancies between the code here and in your integration.
https://docs.stripe.com/elements/address-element/collect-addresses?platform=web
forest spindle
Thank you I didnt have exactly the same setup, completely missed that guide
My bad...
Let me check if it will work!
quasi fjord
No worries! We've got a lot of docs 😅
forest spindle
Ok finally still the same issue
this is my file
quasi fjord
Sorry but that file is too large for me to be able to view/debug.
forest spindle
ok i load stripe outsie the component like in docs
const stripe = loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY);
and inside component i create my element
const renderAddressElement = () => {
return (
<div>
<Elements stripe={stripe}>
<AddressElement
options={{
mode: 'billing',
allowedCountries: ['FR'],
autocomplete: {
mode: 'google_maps_api',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
},
}}
onChange={(event) => {
setOrgData(prev => ({
...prev,
address: event.value
}));
}}
/>
</Elements>
</div>
);
};
quasi fjord
And you are getting an error about removeChild on Node?
forest spindle
yes
quasi fjord
Can you share the exact text AND the file that is throwing that error?
quasi fjord
not me but one of my client (on my browser it works)
Okay so the first step would be to determine what the difference is
forest spindle
but it happens on different clients even tho it works on most clients
quasi fjord
I'm sorry but without more details I cannot really offer much help
- What browsers/versions does it work and not work on?
- Does it depend on whether it's the production or testing version?
- Are you running it on
localhost?
forest spindle
On localhost, it works well
its the production version that fail on some browsers.
it does not work on Chrome version 131.0.6778.205 (x86_64)
mine is
Version 131.0.6778.205 (Build officiel) (arm64)
and works well
quasi fjord
Is there a public URL where I can access this?
forest spindle
yes
when you try to create an account after entering both password, email, and personal information at step 3 some clients experience white page and dont even see the stripe address element
quasi fjord
Do you have test credentials I can use?
forest spindle
you can use dummy data it doesnt matter as it happens before you hit create an account
quasi fjord
I get an error that my email is incorrect
forest spindle
yes just click on orange link below Creer mon compte
sorry its in french
you tried to login instead of signing up
quasi fjord
Ack, thanks
Okay I see the error you referenced. Unfortunately this does not appear to have to do with Stripe
forest spindle
do you get it as well on your end?
forest spindle
hmm interesting i dont know how to debug as it doesnt happen on my local computer
pretty hard to troubleshoot
quasi fjord
It's minified but there are other function calls within this one that are not Stripe.js functions
forest spindle
ok thank you very much for this insight
quasi fjord
If it's not happening locally, can you do a diff between your local code and the deployed code to look for any changes?
forest spindle
even on app.sairen.io on my browser it works
quasi fjord
Ahh okay
forest spindle
this is why it's really tricky for me to debug
quasi fjord
From what I can see, it looks like it's another 3rd party library. I get 562 warnings about 3rd party cookies
forest spindle
ok can you try again in like 3 min to help me debug?
i will add a fix
Hmm I see it might be posthog then
forest spindle
From what I can see, it looks like it's another 3rd party library. I get 562 wa...
can you give me exactly the warnings you get?
quasi fjord
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.
quasi fjord
Okay I just see a single input for Address now
Oh wait nope that works for me. I"m seeing the full address element
quasi fjord
I think you fixed it, since I was getting the error before
lean flameBOT