#フランソワ
quaint swan
stuck plaza
Hi there
inner notch
hi
stuck plaza
How can I help?
inner notch
i apologise in advance if my questions are stupid and have clear answers in the docs
stuck plaza
No worries, we are here to help
inner notch
so i have a next.js app that will be operating of a subscription model. i've got to use a pretty custom UX, in three major steps.
Bit of background, users are either completely new users or have an account but no subscription for this product
1: choose subscription plan (standard)
2: enter address info
3: enter payment info (this should "create" the subscription)
so i want to create a stripe customer after collecting the address info (does this make sense?)
i want to use the PaymentElement but keep reading that i need to create a paymentIntent to use it. but i seems that the paymentIntent requires payment type? how does this all work as a flow
if it makes sense i've split my steps into different "views" that are managed by a HOC
stuck plaza
Gotcha
So yeah at step 2 you want to create the Customer and then at step 3 you are actually going to create the Subscription prior to collecting Payment info
When you create the Subscription it will generate an invoice which generates a PaymentIntent
You then use that PaymentIntent's client_secret to render Payment Element
Have you had a read through https://stripe.com/docs/billing/subscriptions/build-subscriptions yet?
inner notch
I have read through that, but somewhere it got lost in all the tabs i have open, thanks for the assist
how do i customise the <PaymentElement/>?
inner notch
a bit of both?
stuck plaza
You use the Appearance API for styling: https://stripe.com/docs/elements/appearance-api?platform=web
And you can customize certain features when you create your PaymentElement: https://stripe.com/docs/js/elements_object/create_payment_element
inner notch
e've effectively got a custom payment info capture page that i need to copy
can i user these options in the JSX element or only via the hook?
stuck plaza
You can set some defaults in the PaymentElement component
You pass an options prop with this data
inner notch
thank you, if i have more questions a bit later, would i continue this thread?