mrgrygson

[bold raven]

Sure. Your PaymentElement is showing "Save" because it take client_secret from a SetupIntent. You can create a PaymentIntent instead and its button should say "Pay"

The Doc is here https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

[red knot]

But what if I want to have a checkbox saying "Do you want to save this CC for future payments?"

idealy, it should be displayed together with the form, to let user decide how to proceed.

[bold raven]

Yes it should if you set setup_future_usage to off_session

[red knot]

I'm already having the off_session setting and the payment methods are added correctly. My goal is to get the flow where with the same form, the payment method won't be usable for the future, just for current session.

[short knoll]

Hi! I'm taking over this thread.

So you are using the PaymentElement, and you want to add a checkbox on the same page "save card for future use", is that correct?

And currently you create the PaymentIntent before rendering the Payment Element?

[red knot]

So you are using the PaymentElement, and you want to add a checkbox on the same page "save card for future use", is that correct?
Exactly

For displaying payment element, I'm creating setup intent first

[short knoll]

So you have two options, both require some work:

option 1

• add the checkbox on the page
• when users click on need, make a call to your backend to update the PaymentIntent with/without setup_future_usage
• on the frontend, call fetch_updates to update the PaymentElement https://stripe.com/docs/js/elements_object/fetch_updates

option 2

• Instead of first creating the PaymentIntent and then displaying the Payment Element, you could do the opposite with our new integration: https://stripe.com/docs/payments/accept-a-payment-deferred
• This way, when you create the PaymentIntent, you directly know if you should use setup_future_usage or not

[red knot]

Ok.
For option 1, it means that I need to switch from SetupIntent to payment intent before rendering payment element, right.
And this won't remove the message fromscreenshot.

[short knoll]

For option 1, it means that I need to switch from SetupIntent to payment intent before rendering payment element, right.
Ah yes that's true! I forgot that you are using a SetupIntent currently. Hum...

[red knot]

My main pain point is the 2 step checkout, as I want to finalize the payment server side.

so when user clicks "Confirm order", I'm doing some extra validation on the server, and then try to charge the customer, and confirm the payment.

I thought there is a way, where user can just enter CC information, set option if he wants to use it for future or not, and as a result get the payment_method_id, that I can store and use later during server side processing

[ancient musk]

👋 taking over for my colleague. Let me catch up.

I think @short knoll's option 1 is the best way to go

forget about SetupIntent, in your case the customer will purchase either way

whether they choose to save or not their payment Info

I highly recommend reconsidering your integration, there's no need to do a SetupIntent then a PaymentIntent especially since this might trigger 2 times SCA/3DS

[red knot]

1. Create a payment intent on server side and pass client secret to frontend
2. Display Payment Element using client secret. + add a checkbox for saving payment method for later
3. When user clicks "Save credit card" I should do what?

There is also another use case, where returning user will have stored payment method, so I guess the "Confirm order" server side processing should be the same

[ancient musk]

for step 3 you do

• when users click on need, make a call to your backend to update the PaymentIntent with/without setup_future_usage
• on the frontend, call fetch_updates to update the PaymentElement https://stripe.com/docs/js/elements_object/fetch_updates

[red knot]

Sorry, I mean the next button, not the checkbox

because I'd still like to have 2 buttons - one for adding CC, and another one for starting server side processing (I call it 'confirm order')

[ancient musk]

you can use confirmCardPayment with the PM ID https://stripe.com/docs/js/payment_intents/confirm_card_payment#stripe_confirm_card_payment-data-payment_method

[ancient musk]

that's what I meant by reconsidering the workflow, this is too complex, once the user pays there's no need for another action

[red knot]

but what if I need to do some validation upfront?

I'd like to keep it as much as I can server side

[ancient musk]

then you can do option 2 that @short knoll suggested

[red knot]

It's still too fuzzy, but I think I know how to solve it.

Thank you very much for all the help