#sqarf_address-element-prefill-bug
hidden cedarBOT
👋 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/1299387550716137522
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- sqarf_code, 6 hours ago, 14 messages
stoic birchBOT
hollow rivet
Hi there 👋 I'm not sure, I haven't heard of this before. Do you have a test page available where I can see what you're describing?
cyan copper
Not live currently, But it has acted this way before in other projects as well
Try simply import { AddressElement } from '@stripe/react-stripe-js';
<AddressElement
className="mb-4"
options={{
mode: 'billing',
display: { name: 'split' },
defaultValues: { firstName: 'anything', lastName: 'anything' },
fields: { phone: 'always' },
}}
/>
And it will select US
as country
hollow rivet
Are you accessing the page from a us-based IP address?
cyan copper
no
It detects my country correctly (Latvia), if I leave defaultValues undefined
As soon as i pass anything to it, it detects US
hollow rivet
Are you seeing any errors or warning in the console? Asking because billing isn't a valid value for mode and I'm curious if that's cascading into other problems. Do you use that value even when you don't populate defaultValues? Can you share the code where it does seem to detect your location correctly?
cyan copper
One moment
Only this
export type AddressMode = 'shipping' | 'billing';
node_modules/@stripe/stripe-js/dist/stripe-js/elements/address.d.ts:144
It should be correct value for mode
hollow rivet
Based on context I believe subscription is the value you're looking to use:
https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-mode
cyan copper
Then it gives:
TS2322: Type "subscription" is not assignable to type AddressMode
address.d.ts(150, 3): The expected type comes from property mode which is declared here on type StripeAddressElementOption
hidden cedarBOT
cyan copper
Not only typescript error, also throws an actual error: chunk-QT63QQJV.js?v=689506ee:9129 Uncaught IntegrationError: Invalid value for elements.create('address'): mode should be shipping or mode should be billing. You specified mode as subscription.
at c (v3:1:222066)
at v3:1:222340
at v3:1:227686
at Array.reduce (<anonymous>)
at v3:1:227621
at ae (v3:1:228334)
at ce (v3:1:228582)
at Gt (v3:1:304506)
at Fn (v3:1:336939)
at Pr (v3:1:370928)
hollow rivet
Ah, I'm so sorry
I overlooked this is the Address Element and assumed you were talking about the Payment Element
cyan copper
Yup, AddressElement
hollow rivet
Looking to see if anyone else has flagged this. I'm not sure how to test if it default to US because that's where I'm based.
real thistle
Hi 👋
I'm stepping in as my colleague needs to go.
Just so I'm clear, the issue is that the Address Element does not properly detect the browser's locale if you pre-fill some information?
cyan copper
Correct
defaultValues: { firstName: state.user.first_name, lastName: state.user.last_name },
More specifically this
real thistle
Okay my colleague @hollow rivet and I did some more digging and we feel we have enough information to raise this internally as a bug.
We won't be able to follow up here directly but if you want to be kept informed of the progress on fixing this you can reach out to Support here: https://support.stripe.com/contact
cyan copper
Ok, any estimates on fixing it?
real thistle
Unfortunately ,I cannot provide a time estimate right now. We are still in the process of reporting the issue with sufficient details.
cyan copper
Thanks
real thistle
Thank you for reporting this issue. That way we can all make Stripe components work better
cyan copper
Np, thanks for clearing it up. Have a nice evening or morning 😉
real thistle
You too 👋