#ellinor_code
thorny swallowBOT
đ 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/1362319554251853994
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
long jetty
Hi there, yes this is one of the breaking changes introduced in the new basil API https://docs.stripe.com/changelog/basil/2025-03-31/default-layout-of-payment-element
3.6.0 is the latest version of react-stripe-js https://www.npmjs.com/package/@stripe/react-stripe-js, can you check your project and see if npm install run successfully?
sly parrot
I successfully can run yarn install (we don't use npm)
long jetty
Ok, let me try if I can reproduce with your code. one sec
No, I don't see this error.
Can you delete node_modules and yarn.lock file, and run yarn install again?
sly parrot
You mean that I should be able to apply this property on options?
yes will do!
I'm still seeing the same error in my editor
long jetty
Looks like the IDE hasn't picked the latest type definition.
If you open the webpage in a broser, do you see any error in DevTools?
sly parrot
long jetty
They are different errors
sly parrot
Okay good. Just so I'm following, this was a breaking change that now has been addressed? So I should be able to apply defaultCollapsed: false to my options now right? But for some reason I'm not getting the latest type definition
long jetty
Yes, it looks more like a IDE problem to me. You'll want to restart the IDE or you laptopm and try again.
sly parrot
I've restarted my IDE many times đ¤ and merged main etc. So as far as you can see with my setup this should work?
long jetty
I don't see problem in your code. But more importantly, is setting defaultCollapsedto false effective in your project?
sly parrot
No, it's still collapsed even though I have this in the code
long jetty
Is there a public URL that I can visit and test your integration?
sly parrot
Not right now this is only locally, give me a sec I'll see what I can do
but you'll have to create an account, it's just a test env so you can put whatever
long jetty
Is there a test account that I can use for login? you can DM me the login credential
sly parrot
one sec
I hadn't pushed the defaultCollapsed: false to this branch so it just needs to rebuild the dev environment after this push. Sorry will let you know once it's built
long jetty
Ok, no problem
sly parrot
The PR is failing on lint, so I feel like it's not just in my IDE.
"Error: src/CheckoutUI.tsx(205,19): error TS2353: Object literal may only specify known properties, and 'defaultCollapsed' does not exist in type 'StripePaymentElementOptions'."
That doesn't stop the build though so will let you know once it's built still!
Now it should be built, the URL changed. Now it is https://e75b01.mentimeter.dev
I DMed the creds
long jetty
Thanks.
I'm checking the types file in stripe-js and defaultCollapsed is indeed missing.
My project has some problems with typing and that's why the error is shown.
I'll flag this to the stripe.js team, sorry for the incovenicne .
sly parrot
Okay nice, thanks! Is it possible to get updates on this matter?
long jetty
This thread will be closed after a while, you can watch this page for any new release. Or reach out to support https://support.stripe.com/contact/email
sly parrot
So until a new release where this is addressed is out, I won't be able to upgrade @stripe/stripe-js to v7 I guess
thorny swallowBOT
inland gazelle
If it's just a type that is missing then you can just silence the warning in the meantime until we add it
sly parrot
Even though I do that the payment element is collapsed
You can check the test env. I sent above. That one (https://e75b01.mentimeter.dev) has defaultCollapsed: false but it's still collapsed
I tried sending you the creds in DMs but I was not allowed to
So even though I ignore the type error, it still doesn't do anything
inland gazelle
What credentials?
sly parrot
To access the checkout in the test environment, so you can see that it is not working
inland gazelle
Yeah if you can't share things publicly then you'll need to write in to our team. I can share a link to facilitate that if you prefer
sly parrot
I really don't understand haha? Can you not see the history of the thread. One of your developers @long jetty has already tried it and can confirm that it is not working. Sorry I'm confused of what happened now when you joined? I just asked "So until a new release where this is addressed is out, I won't be able to upgrade @stripe/stripe-js to v7 I guess?"
But it is not only a type error, since it does not work even though I ignore the type error
inland gazelle
Looking into this, FWIW it is typed: https://github.com/stripe/stripe-js/blob/master/types/stripe-js/elements/payment.d.ts#L225
Can you share the code you're using to init the Payment Element?
sly parrot
Just curious, are you now able to see the history of the thread? It's a bit confusing when there's two of you from stripe saying different things straight after each other.
Give me a sec
inland gazelle
Yeah, I can. I think my colleague just misspoke, it's clearly typed as per the link above. If you're seeing a type error and it's not working as you expect then I want to make sure you're using the param correctly
sly parrot
<PaymentElement
onLoadError={(errorEvent) => {
setStripeLoadError(errorEvent.error);
}}
onReady={() => {
setStripeError(undefined);
}}
onFocus={() => {
trackCheckoutEvent({ event: 'Touched Payment Element' });
}}
options={{
layout: 'accordion',
// @ts-expect-error
defaultCollapsed: false,
terms: {
card: 'never',
paypal: 'never',
ideal: 'never',
googlePay: 'never',
applePay: 'never',
bancontact: 'never',
auBecsDebit: 'never',
cashapp: 'never',
},
}}
/>
inland gazelle
It's nested within layout, and your original message it isn't
sly parrot
aha okay! Shold it be nested within layout
inland gazelle
Yeah, should be:
layout: {
type: 'accordion',
defaultCollapsed: false
}
That works for me on v7
sly parrot
Aaah there we go, I completely missed that it was nested when I looked in the docs. This works. Thanks a lot!