alessandroway_code | Stripe Developers | Page 1

arctic magnetBOT Jul 31, 2024, 2:32 PM

#

👋 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/1268214826015002686

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

gleaming fable Jul 31, 2024, 2:33 PM

#

Hello are there any errors in the console or your code when Apple Pay doesn't trigger?

stark ruin Jul 31, 2024, 2:34 PM

#

yes just a generic error, I can paste it here in one sec

#

"{"error":{"type":"invalid_request_error","message":"Something went wrong. Unable to show Apple Pay. Please choose a different payment method and try again."}}"

gleaming fable Jul 31, 2024, 2:34 PM

#

Off the top of my head: does your page do anything time consuming like a network call between when the user clicks the submit button and submit is called?

stark ruin Jul 31, 2024, 2:34 PM

#

this is when the apple pay modal doesn't even show up

#

just before calling that line, we are calling one api of ours (with await) to make the booking on our backend.

gleaming fable Jul 31, 2024, 2:36 PM

#

Ah that is probably it. Apple has a requirement that the call to show the payment sheet needs to happen very soon after the user performs an action. I think they have a window of about 1 second and if the submit call happens after that they error out. So network calls can sometimes be fast enough and sometimes not

stark ruin Jul 31, 2024, 2:36 PM

#

oh wow

gleaming fable Jul 31, 2024, 2:36 PM

#

If you need to make that call, we have this flow for two step confirmations https://docs.stripe.com/payments/build-a-two-step-confirmation

#

You could show the sheet, then make your necessary checks, and actually attempt the payment after they succeed

#

Yeah it is an interesting requirement to work with.

stark ruin Jul 31, 2024, 2:37 PM

#

ok and the ConfirmationToken needs to be user alongside the PaymentIntent ?

#

I'll go through this page you just sent me

#

but I want to ask you everything I can 😅

gleaming fable Jul 31, 2024, 2:39 PM

#

Yeah that flow is basically that you create the ConfirmationToken which saves the payment method data quickly, then do your check, then use the confirmation token to confirm the payment intent at which point the normal payment method creation and such happens

stark ruin Jul 31, 2024, 2:39 PM

#

Ok I'll take a look at the page and come back in 10 minutes

#

thanks 🙂

#

So if I'm undestanding correctly the documentation, we need to migrate our code from the current logic:

onCheckout = () => {
await bookingOnOurBackend();
await elements.submit();
await stripe.confirmPayment({ clientSecret });
}

to something like:

onCheckout = () => {
await elements.submit();
const { confirmationToken } = await stripe.createConfirmationToken({});
const {error} = await stripe.confirmPayment({
clientSecret,
confirmParams: {
confirmation_token: '{{CONFIRMATION_TOKEN_ID}}',,
},
});
}

#

But I didn't understand what we need to do on our backend with the confirmationToken

#

do we really need to send it to our backend ?

gleaming fable Jul 31, 2024, 2:56 PM

#

Good question. Looking in to whether you can do the confirm client-side

stark ruin Jul 31, 2024, 2:57 PM

#

the "confirmPayment" is client side in the documentation

#

but it is also sending the tocken to the backend to get some payment details

gleaming fable Jul 31, 2024, 2:58 PM

#

Yep, I wasn't sure if the client side confirm specifically supports confirmation tokens. It looks like it does though and I now see your properly are passing it to the confirmParams in your code https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-confirmation_token

Stripe JS Reference

#

So yes, that looks right to me, definitely test it out and all that but that is the general shape of how your page would have to change

stark ruin Jul 31, 2024, 2:59 PM

#

yes thanks

#

but one more idea

#

with this example code here:

#

onCheckout = () => {
await elements.submit(); // apple pay modal
const bookingResult = await bookingOnOurBackend();
if (bookingResult) {
await stripe.confirmPayment({ clientSecret });
} else {
// handle error
}

#

what should happen if the booking fails on our api ?

#

the payment is actually collected (with apple pay, but also by credit card) at the line "elements.submit" or "stripe.confirmPayment" ?

#

because with these lines in this order, apple pay is called immediately on click

gleaming fable Jul 31, 2024, 3:03 PM

#

The Apple Pay sheet is shown after submit but the payment isn't actually attempted until confirmPayment

#

Does that give you an idea of how you want to handle allowing the user to change their booking and try the payment again?

stark ruin Jul 31, 2024, 3:06 PM

#

thanks, so just calling the elements.submit before our api should work, without migrating to the confirmationToken

#

because our checkout is in only one step, at the end of the process.

#

the users cans edit the booking at anytime before

#

and when they click on "pay", we want a one-click payment

#alessandroway_code