#420coupe_code
hasty willowBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1328845928571863151
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
autumn tundra
Hi there
Just to make sure we're on the same page, are you rendering the PaymentElement without first creating a PaymentIntent or are you rendering the PaymentElement with a PaymentIntent client secret/after first creating a PaymentIntent server side?
dapper stratus
Hi there
hello! thanks for speedy response.
attached is the payment/index.tsx
think i render after a paymentIntent is created
rather i see an intent created in the events and the paymentElement loads after not sure if it's happening simultaneously
autumn tundra
Okay, if you're creating the PI first and passing the client secret from your backend to your frontend, you shouldn't need to use submit
I recommend reviewing the sample quickstart code here: https://docs.stripe.com/payments/quickstart?client=react
dapper stratus
so im calling the stripe.confirmPayment() in the payment-button below, this is ideally when i want the payment processed/ trigger for the applepay/googlepay
it works correctly for every payment except applepay/googlepay
applepay/googlepay get triggered in the elements.submit() call
autumn tundra
Sorry, I'm still a little lost.
Let's back up a second. Can you provide more details on what's different when you complete a payment via the PaymentElement when you use a test card vs. when you use a wallet?
dapper stratus
so when i use test card, payment isnt processed until the 'place order' button is pressed - which is when i call stripe.confirmPayment().
when using wallet, it triggers to collect payment when 'continue to review' is pressed - which is when elements.submit() is called
autumn tundra
And 'continue to review' is your button?
Any chance you have a video that illustrates this or can link me to a test environment (that uses test mode keys) so I can reproduce?
dapper stratus
If needed, i have it available on dev.derftuned.com with the dev env for test payments so you can see for yourself
autumn tundra
ah! sorry for the delay. Is there any way I can access a cart and the payment form without having to fill out address + delivery details?
dapper stratus
not currently but you can enter all fake info as i do here
hasty willowBOT
autumn tundra
Okay, I got to the PaymentElement but perhaps I'm still misunderstanding the issue.
The "Continue to review" button is your button and should call confirmPayment, right?
dapper stratus
no continue to review calls elements.submit() this works for every payment except googlepay/applepay it triggers the capture authorization/wallet here.
and place order calls confirmPayment
pine yew
Hi there! Stepping in for my colleague here
pine yew
So could you explain what this component is meant to do? Why are you calling elements.submit() in the submit handler here, instead of, for example, stripe.confirmPayment() ?
dapper stratus
so the 'continue to review' collects the form of payment and submits it to the element, so it can be called after the terms display and they press the 'place order' button. this way it knows whether to call cashapp, klarna, amazon pay, applepay, googlepay, card, etc.
pine yew
It sounds like you're trying to build a two-step confirmation experience. Have you seen this guide? https://docs.stripe.com/payments/build-a-two-step-confirmation
dapper stratus
yes, that's more or less the guide i originally followed, but stuck on it prompting for googlepay/applepay payment in the elements.submit() call rather than in the confirmPayment() call
should those values be ignored when googlepay/applepay and just let confirmPayment handle the collection?
ie if googlepay/applepay skip elements.submit() else use elements.submit()?
it's just confusing cause cashapp for instance doesnt trigger the collection here and instead waits for the confirmPayment call
my understanding is elements.submit() should only submit the payment details not trigger the collection event.
it currently triggers the collection event for apple/google-pay, you can close out and it will be retriggered when you press the place order button which calls confirmPayment
or is this an instance for confirmSetup to be used instead of elements.submit ?
pine yew
Sorry about the wait here. Could you describe in detail, from the customer's perspective, what checkout/payment flow you would like to build?
dapper stratus
how the current process works if you select any payment other than applepay/googlepay. if card it collects the payment but doesn't process it, same with everything else (cashapp/klarna/amazonpay). It just states another step will appear- which should happen when they press the place order button and the place order button does trigger all the correct events for every payment including applepay/googlepay.
The issue lies in that applepay/googlepay payment confirmation gets triggered early by elements.submit - when you press continue to review button.
pine yew
So in the two-step confirmation flow, when the payment sheet appears for Apple Pay / Google Pay, that represents Stripe collecting the customer's payment method details (ie the first of the two steps), which will be put into the confirmation token for later use on the confirmation page, which is when the payment actually happens (when stripe.confirmPayment is called).
If I'm understanding you correctly, this is working as intended. Does that make sense?
dapper stratus
It’s confirming to pay, not collect info. This should only happen when .confirmPayment js called. Not prior.
I can exit out of this screen, and everything works correctly on .confirmPayment without pre-collecting any Applepay/googlepay info. It does it at the time of place order is pressed which calls .confirmPayment.
Did I explain that any clearer?
pine yew
The Apple UI says "double click to pay" but the payment does not happen at that time
What is happening at that step is payment method collection. You wouldn't see the payment sheet a second time in the second step when stripe.confirmPayment is called
dapper stratus
is there a way to change the behavior to only trigger those calls on the .confirmPayment ?
like if i exit out without confirming it will save the paymentmethod and trigger the whole payment collection/authorization when i press place order
hasty willowBOT
pine yew
The short answer is "no" because thats the way that the two-step confirmation experience is designed to work. If you want to handle Apple Pay & Google Pay separately, what you could do is use the Express Checkout Element to handle Apple Pay & Google Pay: https://docs.stripe.com/elements/express-checkout-element
That's to say, you could put the Express Checkout Element above the Payment Element in your checkout