hexiaolong

[rugged fulcrum]

I am afraid this is not customizable. Is that screenshot something you drew as a concept?

[sacred burrow]

Can you see my screenshot？I have been in the loading state here, not sure whether the transmission is successful

[rugged fulcrum]

Yes I see it. Do you have a public URL I can see?

[sacred burrow]

You can see from the documentation example that you can switch layouts. Is this just for demonstration? Can't be modified?
https://stripe.com/docs/elements/appearance-api

[sacred burrow]

My screenshots are from this document, but I can't find configuration options to change

[rugged fulcrum]

Hey I don't see the same thing. Can you capture screen?

[rugged fulcrum]

Ah I see that, thanks!

[sacred burrow]

you can change from Tabs to Accordion

[rugged fulcrum]

Okie there is an option when you create the options for elements: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-layout

layout = 'accordion'

[sacred burrow]

That's the way I use it
import { Elements } from '@stripe/react-stripe-js'

[sacred burrow]

<Elements
options={{
clientSecret,
appearance: {
theme: 'stripe',
rules: {}
},
locale: currLang
}}
stripe={stripePromise}
>

[sacred burrow]

import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js'

[sacred burrow]

or How do I need to import elements?The current approach is to use the PaymentElement directly

[timid vapor]

Hi! I'm taking over this thread.

Give me a few minutes to look into this.

[sacred burrow]

okay ! thank you so much

[timid vapor]

Can you try something like this: <PaymentElement options={{ layout: "accordion" }} />

[sacred burrow]

Neither of the above references has a layout property to configure
the code like the image ,

"stripe": "^8.202.0" "@stripe/react-stripe-js": "^1.0.0", "@stripe/stripe-js": "^1.0.0", the project has these packages ,

[timid vapor]

Which version of stripe-react are you using? layout was released recently, so make sure you are using the latest version v1.16.0

[sacred burrow]

so i should update @stripe/react-stripe-js to v1.16.0?

[timid vapor]

yes

[sacred burrow]

If I don't upgrade, can I change it this way

[sacred burrow]

my question is, with the direct export of Paymentelements and Elements currently used, like this,import { Elements } from '@stripe/react-stripe-js' ;import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js' ;can I create my own, and how? thanks

[timid vapor]

The screenshot you shared shows how to create a Payment Element in plain Javascript (no React). If you are using React you should use <PaymentElement options={{ layout: "accordion" }} />

Otherwise it's something like elements.create('payment', { options: { layout: 'accordion'} })

[sacred burrow]

the 'elements' from which one of the packages?

[timid vapor]

This is regular JavaScript, so it's using Stripe.js (and not stripe-react-js)

Why aren't you doing <PaymentElement options={{ layout: "accordion" }} /> since you are using React?

[sacred burrow]

oh iknow,if i use it in react,so i should use the PaymentElement as it is now, So what I should do is upgrade？Thank you very much

[timid vapor]

Yes:

• Upgrade your stripe-react-js version
• Then use <PaymentElement options={{ layout: "accordion" }} />
  And it should work!

[sacred burrow]

Ok, I'll give it a try
thanks