harshilbodara

[native kraken]

Hi there!

[devout canopy]

Hello

[native kraken]

We have some doc on how to customize the Payment Element here: https://stripe.com/docs/elements/appearance-api

[devout canopy]

this is PaymentElement right?

[native kraken]

Yes

And you can pass the appearance inside the option object when mounting the Element

<Elements stripe={stripePromise} options={options}>

[devout canopy]

as per docs, for change design we need clientSecret, without this secret code we can't render this element.

[native kraken]

Yes you need a client secret before mounting the Element.

[devout canopy]

CardNumberElement, CardExpiryElement and CardCvcElement
those element not need to client secret right?

and there is a way to change the design without client secret?

[native kraken]

those element not need to client secret right?
Not completely sure. Have you tried?

Yes I think it should work without the client secret in this case.

[devout canopy]

yes, this is working without secret and on submit we need to use confirmCardPayment

[native kraken]

But the link I shared above is specifically about the Payment Element, but instead you want to use the CardNumberElement?

[devout canopy]

no, I need to use PaymentElement with custom style.

without client secret

[native kraken]

I'm consufed. Do you want to use PaymentElement or CardNumberElement?

For PaymentElement you have to provide a client secret.

This is mentioned here: https://stripe.com/docs/stripe-js/react#customization-and-styling:~:text=If you want to use Payment Element%2C it is required to pass in the clientSecret.

So you create the PaymentIntent on your backend, send the client_secret to your frontend, and then mount the Payment Element.

[devout canopy]

I want to use PaymentElement with custom style.
but we not have client secret so we have use CardNumberElement for temp solution.

[devout canopy]

we used a subscription.

[native kraken]

PaymentElement and CardNumberElement are completely different. If you plan to use PaymentElement then I recommend directly using the PaymentElement.

[native kraken]

Then you create the subscription, which will contain an invoice and in the invoice there will be a PaymentIntent (assuming the first invoice is a non-zero amount). And send the client_secret of that PaymentIntent to the frontend.

[devout canopy]

our use case is,
we have one sign form, there is email, name, CardNumberElement and, submit button.

On submit, first we create stripe user then subscription and after we get client_secret and can sent to frontend.

means we need to render PaymentElement before client secret.

[native kraken]

If you want to use the PaymentElement you need to change your flow:

• Start by creating the subscription
• Retrieve the latest_invoice.payment_intent.client_secret and send it to the frontend
• Then on the frontend collect the info you need (email, name, etc.) and mount the PaymentElement with the client_secret

[devout canopy]

subscription will not create before a customer creation in stripe.

right?

[native kraken]

True, you need a customer to create the subscription. But you can always update the customer after the subscription is create. Or you could change the flow so it works in two step:

1. Collect customer info and create the Customer in Stripe
2. Then create subscription & collect payment information with the Payment Element

[bold yew]

👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!