#seanfr8-payment-element
digital vale
Hi Karbi
rapid horizon
When you say the "customer fills out their details" are you referring to your own UI that collects the billing details? With Payment Element that's something you can pass in when you confirm the payment client-side (see https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method_data-billing_details). Or are you using this information to first create a Customer object that is used when you create the PI?
digital vale
That's right, basically when a customer goes to the checkout, they fill out fields that I've created as well, so I need to pass them through to my server so it can create the order on the server
Just to clarify, it's a Pizza Restaurant ordering web app - so I need to grab customer details + delivery/pickup time information before they pay
So Card Element works perfectly as in my fields + Stripe token send through to my server which processes the payment and creates the order if the order is paid on Stripe.
PaymentElement obviously does it differently. I'm actually very happy I found you because my whole day was spent ripping my hair out for a solution haha
rapid horizon
Backing up for a second here - is your current integration creating Customer objects (https://stripe.com/docs/api/customers/create)
digital vale
Yes that's right!
I create a customer object, a payment source and then a payment intentr
inent*
So basically right now it works like this:
- Customer fills out name, email, phone, delivery address, delivery time
- Customer types card details in Card Element
- Customer hits submit button which validates my form as well as Card Element
- When both validate, it sends the client info + Stripe token to my backend
- My server looks for a payment intent ID in payload, if it doesnt exist, it initially creates one, which consists of creating a customer object, a source object and then a payment intent - this is returned to client.
- Client then looks to see if payment intent "requires_action"
- If not, order is placed because if there is no requires action, it will be an order UUID used to forward user to order completion page.
- If there is "required_action" - another loop is made to server which repeats the whole check for a payment intent ID, if there is this time, returns to my client again. I made it work like this so 3d Secure work.
When I implemented PaymentElement, it worked fine - as in, the card element loaded, but for it to load:
- It has to make an initial on mounted call to my server to get a secret, where it also receives the order total
- From then on, the client handles the payment, so I need to somehow communicate with my server:
- The customer name, email, phone so I can create them in my db
- The order details that are stored in the server session (what pizzas they ordered) and the delivery time, etc
Fair enough there is a webhook that tells my server the payment has been completed, but how is my server able to then grab the order details to place the order
and match it up with the payment?
I hope this makes sense..
rapid horizon
Yup that makes sense! and thanks for giving all that detail
The easiest option would probably be to change your flow to collect the Customer name, email, phone, etc in a separate UI that comes before your Payment Element. You send that information to your server which creates the Customer Object + Payment Intent, and then you use that Payment Intent client secret to complete payment with the Payment Element
Another alternative is to do the initial call to your server to ONLY create the Payment Intent (so you can use the secret to mount the payment element), and then when you submit payment you make an additional call to your server to create the customer and update the PI to set it
digital vale
Hmm. What about the actual order items? I am assuming I may need to actually create the order in my DB before the customer pays, so I can associate a PI to it, when the webhook is received, it marks the order as paid ?
Or, because they are stored in a session, maybe when the webhook is marked as paid, that the session is retrieved by the server by session key and adds the order. Do you know if the webhook will be received before the customer is redirected to the return URL by any chance?
rapid horizon
If you go with the first option I described - I assume you'll want to create the order in your own DB when you create the Payment Intent and then when you get the successful webhook you can mark that order as paid
digital vale
Ok - so the only downside here is if the customer decides to change their actual order before paying - if they visit checkout and the order has been created, then it would mean essentially the order could be stuck there. Unless I have another table just for pending orders... Not sure.. Thanks - you've opened my mind a bit I think I might have a breakthrough 🙂
rapid horizon
You could always update their the order and Payment if they decide to change it before paying, but yeah, this flow is definitely different from the one you have right now and will need some large changes to your overall checkout flow
digital vale
Thank you for ackowledging that, I thought I was doing it wrong - I just need to adapt to the new way. Appreciate your help Karbi
digital vale
Hey Karbi, just so you know. You helped a lot. I've figured out and it's now working. I made a step by step process where details are entered before the card is displayed, I create the order in the server as soon as the payment intent is created and return the order UUID in the payment intent meta data to use on the front end. Seems to work well.
Just one question... I can't seem to see GOogle Pay as an option in test mode, I have a card set up in Chrome, do I need to do any more set up to make it work for test mode?
daring vigil
Hi there, stepping in
digital vale
Yes I do..
I am wondering if it's because I'm in Australia and the test thinks im in USA?
Not sure
All is see is then when I try to pay using PaymentElement
No options on the top
I read in your docs that they should just display if a card is set up on Apple Pay or Google Pay, is that right?
daring vigil
Yes it should display on top. Do you have a public URL that I can try?
digital vale
Oh yes I do.. It's terirble looking as I haven't implemented an actual design yet, just mucking with fucntionality - if you can navigate it, then here it is: https://staging.manoosh.com.au/order/pickup/enmore
Just add a pizza to the cart then go to checkout and checkout as guest
Warning: It's terrible at the moment - stuff everywhere
digital vale
If you have any issues just let me know 😄
daring vigil
brb
digital vale
np
daring vigil
I do see the Google Pay tab, with my account
digital vale
far out
daring vigil
so it's def not an integration prob, just the logged in Google account
digital vale
it must be because Im in AUstralia right?
digital vale
Must be, it doesn't display on my phone either, even though I have Google Pay set up on there too
Is there an option to set my testing country perhaps?
daring vigil
I can't think of anything other than VPN
I am pretty sure AUS is supported with GooglePay. Maybe you would want to get some of your friend there to try
https://stripe.com/docs/connect/payment-method-available-countries this shows GooglePay availability with Aus
daring vigil
hmm weird, I def see that option