awells-paymentrequest-followup | Stripe Developers | Page 1

kind pumice Oct 22, 2021, 9:20 AM

#

Hi, can you post a summary here and perhaps an update on what you've found whilst debugging?

cobalt meteor Oct 22, 2021, 9:29 AM

#

#

#

the call for stripe.confirmCardPayment is taking ~35s

#

summary:

kind pumice Oct 22, 2021, 9:30 AM

#

Is this in live mode or test mode?

cobalt meteor Oct 22, 2021, 9:30 AM

#

live mode

#

we're having trouble with the apple modal: because something is timing out, we see "payment not completed"

#

at which point the modal pops down, and then we proceed as normal and the payment actually goes through

kind pumice Oct 22, 2021, 9:31 AM

#

hmm that's odd, do you have the PaymentIntent ID?

cobalt meteor Oct 22, 2021, 9:32 AM

#

pi_3JnJeWDFZA9p024R0fk2r4KE

kind pumice Oct 22, 2021, 9:37 AM

#

Thanks, looking into this

#

Are you able to open up a network tab of some sorts and see what exact request is taking so long?

#

Basically I'm trying to establish is this is a problem on Apple's end or Stripe's

#

Looking at the latency of your requests, confirming a PaymentIntent is around ~2 seconds, which is normal. So something else is going on here

cobalt meteor Oct 22, 2021, 9:46 AM

#

#

the timing above seems to suggest it takes 35 seconds

#

but the network request only takes 2.69s

kind pumice Oct 22, 2021, 9:49 AM

#

Yeah something else is causing it to hang, the actual API request to Stripe is working normally

#

Ah I think I see what's going on

cobalt meteor Oct 22, 2021, 9:49 AM

#

i've posted a screenshot of the code above: can you see anything wrong?

kind pumice Oct 22, 2021, 9:50 AM

#

You need to report to the browser that the confirmation succeeded with ev.complete('success');

#

and ev.complete('fail'); if it failed, see here: https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-complete-payment

Payment Request Button

Collect payment and address information from customers who use Apple Pay, Google Pay, and browser-saved cards with Payment Request APIs such as Microsoft Pay on Edge.

cobalt meteor Oct 22, 2021, 9:52 AM

#

how long does the web hook take?

kind pumice Oct 22, 2021, 9:52 AM

#

So in your case if initialConfirmError is null you'd want to call ev.complete('success')

cobalt meteor Oct 22, 2021, 9:52 AM

#

at the moment we're actually waiting for our backend to receive the webhook and update some state

#

and then calling ev.complete('success')

kind pumice Oct 22, 2021, 9:53 AM

#

Waiting for a webhook is not recommended and quite brittle, webhooks do get lost and/or delayed

cobalt meteor Oct 22, 2021, 9:53 AM

#

webhooks do get lost

#

? are there any guarantees around this?

#

we're using it for fulfilment

kind pumice Oct 22, 2021, 9:53 AM

#

So a payment could have completed but you would have no way of informing your user. Instead you should use the result of the Stripe.js call to confirm to the customer if the payment succeeded (and call ev.complete('success')). You'd use webhooks for your business logic on the backend

kind pumice Oct 22, 2021, 9:54 AM

#

cobalt meteor ? are there any guarantees around this?

It's just a nature of the internet, sometimes network blips happen and you don't receive a webhook, or it arrives but delayed

cobalt meteor Oct 22, 2021, 9:54 AM

#

sorry yes that makes sense! but i'm assuming you re-try several times?

kind pumice Oct 22, 2021, 9:55 AM

#

cobalt meteor we're using it for fulfilment

You should use webhooks as fulfilment and business logic, but don't use them to signal to your customer that the payment succeeded. You can safely use the response from stripe.confirmCardPayment for that.

cobalt meteor Oct 22, 2021, 9:57 AM

#

gotcha, thanks!

cobalt meteor Oct 22, 2021, 10:47 AM

#

is there a way to test this in the test env?

kind pumice Oct 22, 2021, 10:50 AM

#

The whole Payment Request flow should be the same in test as it is in live when it comes to load times

cobalt meteor Oct 22, 2021, 11:02 AM

#

so we can test apple pay ?

#

in test

#

thanks for your help 🙂

kind pumice Oct 22, 2021, 11:26 AM

#

You sure can, you need to have a real card set up in your Apple Wallet, but when using your test keys Stripe won't make a real payment

cobalt meteor Oct 22, 2021, 11:43 AM

#

do i need to regsiter the domain on test?

#

also, we've made the changes suggested but still have the same problem

kind pumice Oct 22, 2021, 12:21 PM

#

Are you using connect?

cobalt meteor Oct 22, 2021, 1:47 PM

#

yep

kind pumice Oct 22, 2021, 2:15 PM

#

You do need to register the domain, specifically using your live key: https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=html#html-js-using-with-connect

Payment Request Button

Collect payment and address information from customers who use Apple Pay, Google Pay, and browser-saved cards with Payment Request APIs such as Microsoft Pay on Edge.

cobalt meteor Oct 22, 2021, 2:43 PM

#

so, register the domain on a test account, using the live key?

#

thanks

#

we implemented the changes and the timing is like so:

#

#

you can see 33s to call confirm card payment

#

console.log('stripe.confirmCardPayment start:', new Date())
        // Confirm the PaymentIntent with Stripe's API without handling potential next actions (yet).
        const {
          paymentIntent: confirmPaymentIntent,
          error: initialConfirmError,
        } = await stripe.confirmCardPayment(
          paymentIntent.client_secret,
          { payment_method: event.paymentMethod.id },
          { handleActions: false },
        )
        console.log('stripe.confirmCardPayment end:', new Date())
        if (initialConfirmError != null) {
          event.complete('fail')
        } else {
          // Report to the browser that the confirmation was successful, prompting
          // it to close the browser payment method collection interface.
          event.complete('success')

shadow zinc Oct 22, 2021, 3:02 PM

#

hello again

#

reading up on your console logs

#

ah perfect so you've narrowed it down to confirmCardPayment() being the one taking so long

and I know the solution

#

hmm actually, you're already doing handleActions: false , IMO that should not be taking >30s so that seems pretty off

and that is the main issue here, confirmCardPayment() takes so long that by the time your code calls event.complete('success'), the Apple Pay sheet has decided to time out and show that error

now I wanna dig into why that confirm took so long
lets start here, can you share the PaymentIntent ID for a repro, the PI ID that you confirmed

cobalt meteor Oct 22, 2021, 3:41 PM

#

pi_3JnJeWDFZA9p024R0fk2r4KE

cobalt meteor Oct 22, 2021, 3:56 PM

#

@shadow zinc is there anything else you need 🙂 ?

shadow zinc Oct 22, 2021, 3:57 PM

#

just started looking (might be a bit, Discord is busy and also pulled into things internally)

#

ok so seeing that request completed in roughly 2.45 seconds on Stripe's side. so yeah a bit confused on how the Promise resolved on your webpage in >20s

cobalt meteor Oct 22, 2021, 4:17 PM

#

from the above code, does anything stand out?

#

it's worth noting it only does this for Apple pay, not google pay

shadow zinc Oct 22, 2021, 4:30 PM

#

nope code is fine and the request was under 3 s so I'm thinking about why the promise resolved much later for you
is anything else going on in that page?
The code you shared reads fine top down but not sure if something else is throwing that off

cobalt meteor Oct 22, 2021, 4:33 PM

#

nothing much else

shadow zinc Oct 22, 2021, 4:46 PM

#

lemme bounce ideas with a colleague in case I missed something simple

#

can you do another repro, share the browser logs again and the PaymentIntent ID as well
The one you shared earlier was helpful but the timestamps logged out were different from the PaymentIntent you repro'ed so wanna rule that out and narrow down

cobalt meteor Oct 22, 2021, 5:08 PM

#

sure

#

shadow zinc Oct 22, 2021, 5:10 PM

#

I just tried to repo and on my end, confirmCardPayment() with Apple Pay resolves in 1 or 2 seconds across my two repros

can you share the logs in text? easier to copy/paste

and also the PaymentIntent ID, thanks!

cobalt meteor Oct 22, 2021, 5:11 PM

#

#

[Log] request with Monzo API to create payment intent end – Fri Oct 22 2021 18:09:19 GMT+0100 (BST)  (97cfe03671c4392eaedf70876fc3fd51047801ec.abda44760b3ce06a3097.js, line 1)
[Log] stripe.confirmCardPayment start: – Fri Oct 22 2021 18:09:19 GMT+0100 (BST)  (97cfe03671c4392eaedf70876fc3fd51047801ec.abda44760b3ce06a3097.js, line 1)
[Log] stripe.confirmCardPayment end: – Fri Oct 22 2021 18:09:55 GMT+0100 (BST)  (97cfe03671c4392eaedf70876fc3fd51047801ec.abda44760b3ce06a3097.js, line 1)
[Log] polling Monzo API for state change start – Fri Oct 22 2021 18:09:55 GMT+0100 (BST)  (97cfe03671c4392eaedf70876fc3fd51047801ec.abda44760b3ce06a3097.js, line 1)
[Log] polling Monzo API for state change end – Fri Oct 22 2021 18:09:58 GMT+0100 (BST)  (97cfe03671c4392eaedf70876fc3fd51047801ec.abda44760b3ce06a3097.js, line 1)

#

payment intent ID is pi_3JnRF5DFZA9p024R1Z11CK5Z

shadow zinc Oct 22, 2021, 5:15 PM

#

thanks
and one more thing, can you tell me what your browser's Network tab as, for the Stripe API request to /v1/payment_intents/:id/confirm?

when does that network request start/complete

cobalt meteor Oct 22, 2021, 5:16 PM

#

in the screenshot above, it was api.stripe.com

#

took 2.78s

#

but that's the network request coming from when we call stripe.confirmCardPayment

#

the unexplained bit is why when we called stripe.confirmCardPayment, the requset isn't made for ~30s after we call it

shadow zinc Oct 22, 2021, 5:18 PM

#

correct it would be api.stripe.com/v1/payment_intents/:id/confirm , I just used the suffix

cobalt meteor Oct 22, 2021, 5:18 PM

#

does that make sense?^

#

or do you need start/end time of the network request?

shadow zinc Oct 22, 2021, 5:19 PM

#

no that works

#

I had missed the network tab you shared

#

thanks for sharing that proactively!!

#

digging in

cobalt meteor Oct 22, 2021, 5:42 PM

#

gotta jump off, but if we can keep this thread open so we don't lose progress that'd be great!

#

thanks for your help!

crystal tundra Oct 22, 2021, 5:43 PM

#

@cobalt meteor wait for a sec

cobalt meteor Oct 22, 2021, 5:43 PM

#

👍

crystal tundra Oct 22, 2021, 5:43 PM

#

We can't really keep the thread open for a long time. I think you'll want to chat directly with our support team if you have to run. Especially on a Friday (we're not on Discord on week ends)

#

We can still look (@shadow zinc was trying) but if you're logging off moving to a normal support interaction via https://support.stripe.com/contact/email is better

cobalt meteor Oct 22, 2021, 5:44 PM

#

i'll hang around on here then 👍

#

if you're still looking into it 🙂

crystal tundra Oct 22, 2021, 5:45 PM

#

but you just said you had to jump off 😅

shadow zinc Oct 22, 2021, 5:52 PM

#

@cobalt meteor ok another thing

1/ I'm trying to narrow things down a bit, can you share the timestamps+browser logs for when your paymentmethod event is called (from PRButton)

2/ pls also add timestamps for when you're about to call ev.complete() in either success/fail state

3/ can you share the full function you've implemented in the paymentmethod event from PRButton

cobalt meteor Oct 22, 2021, 11:11 PM

#

@shadow zinc please see above for the timestamps and logs 🙏

crystal tundra Oct 22, 2021, 11:12 PM

#

@cobalt meteor you didn't share the timestamps we asked for right?

#

hmunoz asked for extra information

#

But I really think you'll need to talk to our support team instead, we didn't hear back from you since then and we haven't found anything conclusive

cobalt meteor Oct 22, 2021, 11:13 PM

#

📎 message.txt

shadow zinc Oct 22, 2021, 11:19 PM

#

@cobalt meteor thanks that is helpful
can you please also get me logs + timestamps in that function for

1/ when paymentmethod event is triggered
2/ when you're about to call doMutation` to create the PaymentIntent
3/ when 2/ above resolves
4/ before the first and second confirmCardPayment()
5/ after the first and second confirmCardPayment()
6/ also log out the PaymentIntent ID or client_secret in code

I'm basically looking for a clear picture into what line of code is hit at what time , so the more logs the better

and your updated code with those logs would be helpful too to really get a great picture

a/ can you try this all in test mode using testmode publishable and testmode secret keys? want to see if test mode is different from live mode here

b/ retry in live mode with all the extra logs from 1/ -> 5/

and please share PaymentIntent IDs for both repro's in live and test mode
and please write in with all that info to Support at https://support.stripe.com/contact and let them know you spoke to Heath in Discord and I recommended you write in with those details

cobalt meteor Oct 22, 2021, 11:21 PM

#

can you try this all in test mode using testmode publishable and testmode secret keys?
-> is this possible in test mode for a Stripe Connect integration? do i need to register the domain with the test connected account using testmode secret key, or live key?

shadow zinc Oct 22, 2021, 11:24 PM

#

yes it is
the account has to be live mode and the domain registered in live mode

but after that, you can use test mode API keys to create test mode PaymentIntents and test mode Apple Pay card PaymentMethods

cobalt meteor Oct 22, 2021, 11:25 PM

#

against a live connected account?

shadow zinc Oct 22, 2021, 11:25 PM

#

so to explain

#

do i need to register the domain with the test connected account using testmode secret key, or live key?
domain stays registered in live mode on a live mode Connect account

cobalt meteor Oct 22, 2021, 11:25 PM

#

so

register domain on live connected account
create an intent on the connected account as usual, but instead use the test key

shadow zinc Oct 22, 2021, 11:26 PM

#

so question

#

were you already testing on Connect? or no

#

I don't recall

cobalt meteor Oct 22, 2021, 11:26 PM

#

yes

shadow zinc Oct 22, 2021, 11:26 PM

#

yeah so that means you already have the right domain registration etc

cobalt meteor Oct 22, 2021, 11:26 PM

#

we've got a standard connect integration

#

but i was doing it on real payments

shadow zinc Oct 22, 2021, 11:27 PM

#

so all you need to do is use test mode API keys to create PaymentIntents and also test mode keys in your React code

#

everything else just works

cobalt meteor Oct 22, 2021, 11:28 PM

#

great, thanks

#

i'll try that

#

what's the reason for testing in test, shouldn't live mode be the same?

crystal tundra Oct 23, 2021, 12:21 AM

#

@cobalt meteor unfortunately we won't be able to dig deeper at this point as we're all out for the day 😦

#awells-paymentrequest-followup