#Sean D-react-confirm

1 messages · Page 1 of 1 (latest)

neat echo
#

Can you describe the flow of the payment with a bit more detail?

Something like:

  1. customer is on page and submits card details
  2. card details are confirmed by stripe
  3. customer is redirected to new page and shown card details
  4. customer clicks "pay" and card is used to pay X
rose jetty
#

thanks @neat echo

Page 1: An itemized bill is presented to the user (e.g. $1000). User selects payment method -- Credit/Debit/ACH

Page 2: User enters their payment information -- all the normal fields, but we're rendering all the stripe elements on this page CardNumberElement, CardExpiryElement, CardCvcElement

Page 3: Confirm all payment info -- the bill, payment method, billing info, etc.,. The user presses a button that makes the request to pay

violet blaze
#

@rose jetty If I'm not mistaken you may have a flow like mine?

  1. User selects the topup amount
  2. Selects payment method -> credit card
  3. Collect Card data
  4. Confirmation
  5. Payment Final

Correct?
Just to clarify, not exact but the way you collect info to later finalize it?

rose jetty
#

@violet blaze yes!

neat echo
#

@violet blaze top-ups are entirely unrelated here. If you have questions about that flow, can you ask via the main channel and not in threads?

violet blaze
violet blaze
violet blaze
#

That's at least what I did, but the elements have to stored somewhere to do that.

#

Again, this is something I do but two-shoes can clarify if you should do otherwise.

rose jetty
#

yeah i think that's my issue... when i go from page 2 -> page 3 what happens to my elements? they're definitely not rendered anymore (i'm using react)

violet blaze
violet blaze
#

Another way would be to collect the payment details and confirming the intent afterwards?

#

Again, that would mean you would have to pass the data forward. I just hopped in as I saw you have a similar flow to mine and thought I could help; two-shoes will most likely direct you down the right path though.

rose jetty
#

this is def helpful @violet blaze thanks for showing me what you've done. we might very well go with the confirmation flow but would like to know how to pass the elements from one page to the next

open basalt
#

Sounds more like you want a SetupIntent to capture the paymentMethod to the customer - then use the resulting paymentMethod (on the "next" screen) to make the actual payment (paymentIntent). The data from the first screen is saved to the customer (with "off_session=true") before moving to the next screen.

neat echo
#

would like to know how to pass the elements from one page to the next
@rose jetty you would need to pass the client secret from the confirmation step to whatever method you're using to redirect the customer to the next page. I'm not sure how you're doing that currently, but the way I've done it in the past is I fetch() a server-side function and pass the data via the body of the request, then do a redirect from there

rose jetty
#

got it, got it. there's a lot to think about 😅 I'm actually going back and forth with my PM now and we might even redesign the flow a bit (not just because of stripe). @open basalt thanks for also mentioning SetupIntent i'll look into that too

violet blaze
#

I redesigned 3 times until I got the right flow I wanted, it's worth it!