jedpatterson

[analog flicker]

Hello

You want to use our Split Elements in that case. So CardNumberElement, CardCvcElement and CardExpiryElement -- see: https://stripe.com/docs/stripe-js/react#available-element-components

[winged rivet]

I noticed I need to pass the Stripe Client Secret now when I load the element, is that correct?

[analog flicker]

No that shouldn't be correct with Split Elements.

Only with Payment Element

[winged rivet]

I decided to go with PaymentElement as it was already formatted in a nice way.

Currently, the flow is they fill out a form, and then they fill out card details and hit a custom button to checkout.

Will they need to fill out the form, then I load the element so I can grab their email?

[analog flicker]

Up to you, really. Not sure how the email comes into play.

If you want, you can look at the deferred-intent flow (https://stripe.com/docs/payments/accept-a-payment-deferred) which doesn't require a clientSecret up front to render Payment Element

[winged rivet]

Think I am almost there, is it possible to dynamically adjust the price once the PaymentElement has been loaded?

On the form, they can select a quantity, this is done on the same page as the payment element is rendered?

My understanding is that its done when the payment intent is first setup, which is where you get the client secret from

[analog flicker]

Is this with the intent-first, or deferred-intent flow?

[winged rivet]

intent first

Setup intent -> render <Elements> -> Render <paymentElemet />

[analog flicker]

Hmm if with a SetupIntent then there will be no amount

Do you mean PaymentIntent?

[winged rivet]

Sorry if I'm not being clear enough.

I run this before rendering the page:

const paymentIntent = await stripe.paymentIntents.create({
    amount: 50 * 100,
    currency: "GBP",
  });

However the amount could change depending on what they pick in the form

[analog flicker]

Yep so when they change their quantity you want to call your backend and use https://stripe.com/docs/api/payment_intents/update to update the amount. You also then want to call fetchUpdates on your frontend after that (see: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#fetch-updates )

[winged rivet]

Perfect, thank you.

To keep my records, I want to attach their email to the transaction, would this be the right way to do it?

const paymentResult = await stripe?.confirmCardPayment(clientSecret, {
payment_method: { card: cardElement },
receipt_email: email,
});

[worthy dove]

You can do that but setting receipt email will send a receipt to that email address

Is that what you want?

[winged rivet]

Ideally not, I just want to be able to attach transactions to their emails

[worthy dove]

Well the best way would be to create a customer object in stripe

With the email set

Then pass that customer id to the payment intent

No receipt would be sent

Alternatively you could just set metadata indicating the email on the payment intent

[winged rivet]

Would I do that with stripe.paymentIntents.update after they have checked out?

[worthy dove]

Depends on your flow

You can do it on creation or update

Whenever. Completely up to you

[winged rivet]

const { error } = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: ${window.location.origin}/registration/confirmation,
},
});

Is it possible to do this without adding return URL, I want to handle the post-checkout flow myself?

Says it is required

[worthy dove]

That's correct it's required. You can set redirect to if_required though: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect

That means you'll only be redirected to the return_url when the payment method requires it

Some payment methods require the redirect

Card for example doesn not

[winged rivet]

Do you know which do require it?