#tomh0027
hazy perch
You'd basically start with step 2 here: https://stripe.com/docs/payments/quickstart (Build a checkout page on the client)
You already have your PaymentIntent and its client secret, you just need to use that secret to initialize Elements
balmy crestBOT
wheat vessel
You'd basically start with step 2 here: https://stripe.com/docs/payments/quickst...
I think this creates payment intent at the time of rendering page
but in my case, I get client secret when I click subscribe button here
how can I create elements without client secret?
hard canopy
Hello! I'm taking over and catching up...
If you want to create the Payment Element before you have a client secret we have a guide for that here: https://stripe.com/docs/payments/accept-a-payment-deferred
wheat vessel
can you please read this thread to get a better understanding of what I want?
#dev-help message
hard canopy
That thread seems to be about Checkout, which is not compatible with the Payment Element.
Can you summarize your current question here please?
wheat vessel
so I used invoice
I created invoice, and used the payment intent of the finalized invoice to confirm payment
but I had this error
"Payment details were collected through Stripe Elements using automatic payment methods and cannot be confirmed with a Payment Intent configured with payment_method_types."
I was told
and follow this doc
https://stripe.com/docs/payments/quickstart
hard canopy
That's correct. You need to create and finalize the Invoice first, which creates the Payment Intent, which has the client secret, which is what you use to initialize the Payment Element with.
But you're saying you don't want to do that?
wheat vessel
no
he told me to follow this doc
https://stripe.com/docs/payments/quickstart
but this gets payment intent at the time of loading the home page
hard canopy
Yes.
wheat vessel
however, in my case, I create invoice, and get payment intent when click subscribe button here with the elements filled
hard canopy
Okay, so to clarify, you want to display the Payment Element before you create the Invoice?
wheat vessel
yes
hard canopy
Okay, so you would use the deferred flow, but without automatic payment methods. You need to configure the Payment Element to use the same payment method configuration as your Invoice.
wheat vessel
I didn't configure any payment method when create invoice
hard canopy
Then it's using the payment method options you have configured in your invoice template settings in the Dashboard: https://dashboard.stripe.com/settings/billing/invoice
wheat vessel
I am now in test mode and it shows this
hard canopy
Click on view all settings in the top right.
wheat vessel
do I need to set in live mode?
hard canopy
Yes. I'm not sure why it behaves that way, those settings apply to test mode as well as far as I know.
wheat vessel
this is the full settings
hard canopy
Yep, so you need to configure the Payment Element with the same payment method options configured there.
wheat vessel
do I need to pass all these methods?
hard canopy
Yes. Do you have an Invoice ID from one of your previous attempts? I can show you in the API if that would be easier.
wheat vessel
plz take a look if this works
in_1Nn6xkIowVcSxrI8VtayUgoE
hard canopy
Okay, so if you retrieve the Payment Intent associated with that Invoice from the API you can see what payment_method_types it ended up using, which in this case are card and paypal, so those are the ones that applied to this Invoice when it was finalized and the ones you need to configure the Payment Element to use without a client secret.
It would probably be better if you explicitly set those when you create the Invoice: https://stripe.com/docs/api/invoices/create#create_invoice-payment_settings-payment_method_types
That way your integration won't break if you change a configuration in the Dashboard.
And you can set it in code in both places.
wheat vessel
can you check if this options is correct when create invoice?
payment_settings: { payment_method_types: ["card", "paypal"] },
hard canopy
That seems right, yeah.
wheat vessel
but where to pass payment element options?
hard canopy
You pass paymentMethodTypes when you initialize Stripe Elements: https://stripe.com/docs/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes
wheat vessel
Okay, so if you retrieve the Payment Intent associated with that Invoice from th...
can you tell me how come this invoice has card and paypal as payment methods?
hard canopy
Because that's how you have your account configured.
It's likely the other payment methods you have enabled didn't apply to due currency/country/etc. restrictions.
wheat vessel
I configured this
<PaymentElement
className="w-full mb-[12px]"
options={{ paymentMethodOrder: ["card", "paypal"], }}
/>
That's the wrong place.
This is not a Payment Element option, this is an Elements instance option.
wheat vessel
I see