#CompassAvi-elements
dense flare
For customer information like name, email, etc - that's something you'd need to collect in your own UI (we don't offer any pre-built elements for it). You can use your own UI elements in combination with the card element and when they click a "Pay" button your event listener for that button can call out to your backend. YOu'd create the customer and payment intent server-side, and then use Stripe.js to either create a Payment Method or confirm the Payment Intent.
fading patrol
I see. so basically, it would still be on one form, but once submitted, we would use the customer information and pass that to the backend. once we have the resolved and returned stripe customer id back on the front-end, we would continue to issue the payment intent from the card/amount directly to stripe? and I'd assume with passing the customer id into that route, we'd have all three necessary ids?
(stripe would return both the payment method id and the payment intent id)?
with confirm: true
dense flare
You'd create both the Customer AND the Payment Intent (you can pass in the customer ID when you create it) in your own server - Stripe won't create the Payment Intent for you.
fading patrol
ahh, ok.. but the payment intent would just take the customer id and amount? obviously no cc info, right?
dense flare
Yes, when you create server-side you can pass in the customer and amount and send the Payment Intent client secret back to your frontend. From your front-end you can confirm the payment with confirmCardPayment (see https://stripe.com/docs/payments/accept-card-payments?platform=web&ui=elements for details on how this whole flow works).
The above example uses the card element, but we also offer a newer Payment Element as well which has a slighlty different flow that we talk about here (https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements)
fading patrol
So, just to make sure I'm on the same page. We have one form with fields for the customer (name, email, etc.), something that displays the amount and entry of all the credit card fields (from CardElement, possibly?). We handle the button submission and pass customer info only as well as the amount to our server. we create the customer from the backend to stripe an use that to also create the payment intent right after. we return both of those to the front-end and then execute the stripe process to handle the rest, passing in customer id and intent? do I have that right?
dense flare
Mostly yes, but you'd specifically pass the Payment Intent client-secret back to your frontend. You don't need to pass the customer ID back to your frontend unless you need it for something else, since it isn't needed during confirmation
fading patrol
ahh, since the payment intent already has the customer "baked in"
dense flare
yup!
fading patrol
thanks, got it!!
quick aside question, will the new paymentelement create a payment method (pm_###)?
dense flare
The new Payment Element can't be used to separately create a Payment Method, but it will create a Payment Method as part of the confirmation process (using confirmPayment)
fading patrol
how is it different than cardelement (we currently use cardelement)?
dense flare
Payment Element allows you to accept a lot of different Payment Method types without needing more elements, and they flow it needs is slightly different. With Payment Element you can't display/mount it until AFTER the Payment Intent has been created so you can't wait to create the Customer + Payment Intent like you would with the card element
fading patrol
I see, so in the setup described where we would want it all in one form and make the call to our server to create the payment intent and return back, what's the best method to use?
dense flare
If that's the flow you need, you'll have to use Card Element
fading patrol
got it.. we use the card element just for adding cards though. I'd imagine we would somehow change it to not only create the card but also pass the payment intent to it to immediately charge it?
and just making sure that would only be the one call to stripe
(after we have the payment intent already)
dense flare
Did you take a look at the link I sent you earlier (https://stripe.com/docs/payments/accept-card-payments?platform=web&ui=elements ) ? That doc has more detail on how this wohle flow works end to end