equilibrium_applepay-clickevent | Stripe Developers | Page 1

grave quartzBOT Jun 28, 2024, 3:54 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1256276442262536355

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

rustic star Jun 28, 2024, 3:56 PM

#

Do you have a URL where I can see this behavior?

clever reef Jun 28, 2024, 3:56 PM

#

clever reef Jun 28, 2024, 3:56 PM

#

rustic star Do you have a URL where I can see this behavior?

yeah sure

#

its https://global.celitech.com/

#

I can add a bit more about this

we previously had a v1 project where we had the certificate and all was fine

we moved to a v2 project with the same domain (new code base) .. however, we forgot to move the certificate

while trying to fix Apple Pay today.. I added the certificate again and it's not working for some reason

I enabled/disabled Apple Pay + I enabled/disabled the domain and it's not working

Here's the certificate: https://global.celitech.com/.well-known/apple-developer-merchantid-domain-association

rustic star Jun 28, 2024, 4:00 PM

#

I'm not able to get to the second step of the payment process. It just hangs indefinitely

clever reef Jun 28, 2024, 4:01 PM

#

can you please refresh and re-try?

you need to pick destination/startDate/endDate/PackageSize and tick the checkbox

#

usually package size is picked automatically for you

rustic star Jun 28, 2024, 4:04 PM

#

I had picked one before, just to be sure. Now I can't reload the page on Safari

clever reef Jun 28, 2024, 4:04 PM

#

the page completely? what are you getting

rustic star Jun 28, 2024, 4:06 PM

#

A timeout and a type error

clever reef Jun 28, 2024, 4:09 PM

#

Its working fine on Chrome for me, can you please check that?

#

Also, its fine on Safari (mobile)

rustic star Jun 28, 2024, 4:10 PM

#

Yeah, its still not working. In order to test Apple Pay I would need to be able to view the page in Safari unfortunately

clever reef Jun 28, 2024, 4:14 PM

#

got it, are you using VPN by any chance? maybe that affected the response

rustic star Jun 28, 2024, 4:14 PM

#

Yes, I am

clever reef Jun 28, 2024, 4:19 PM

#

do you mind disabling it temporarily while checking the website? If you have an obligation to keep it, I understand

rustic star Jun 28, 2024, 4:21 PM

#

For security reasons, I can't

clever reef Jun 28, 2024, 4:25 PM

#

I understand, in that case, I removed some IP blocking that we had previously (due to some card testing attempts)

in case the VPN was getting blocked, it should probably work now

if its not, would it be possible to have this tested by your colleagues? where they can access the payment page (if its not possible for you)

rustic star Jun 28, 2024, 4:31 PM

#

ALright, that worked

#

But Apple Pay is showing just fine

clever reef Jun 28, 2024, 4:31 PM

#

its failing for some reason

#

"Something went wrong. Unable to show Apple Pay. Please choose a different payment method and try again."

#

My colleague tried it with his Apple Pay account

#

I have a test mode account URL if its possible for you to check it (to avoid charges)

clever reef Jun 28, 2024, 4:33 PM

#

clever reef "Something went wrong. Unable to show Apple Pay. Please choose a different payme...

clarification, Apple Pay does show up, but this issue is when my colleague clicked "Buy Now"

rustic star Jun 28, 2024, 4:35 PM

#

Ahhhh, okay. Hold on just a sec

#

Ugh, the page hangs at random and now every time I try to enter details on the first page, it auto-submits the form when i select a date, which stops me from being able to select a package size. Then it hangs indifinitely

clever reef Jun 28, 2024, 4:40 PM

#

the form will be temporarily disabled to recommend a package size for you, which should be really quick

rustic star Jun 28, 2024, 4:43 PM

#

This feels kind of broken for Safari. It just hangs with a timeout again. Quitting out and starting again gets me this far. Incognito mode doesn't change anything.

clever reef Jun 28, 2024, 4:47 PM

#

Is it possible to check it on mobile?

#

(using safari browser in the image above)

rustic star Jun 28, 2024, 4:49 PM

#

I don't have an iPhone to test with unfortunately

#

What does the console say when you get to the payment page and submit?

clever reef Jun 28, 2024, 4:52 PM

#

I forwarded the error as it when we confirm the payment intent as follow

  const result = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: `${window.location.origin}/install-your-esim?email=${email}`,
      payment_method_data: {
        billing_details: {
          email: email,
        },
      },
    },
  });

  if (result.error) {
    // Show error to your customer (for example, payment details incomplete)
    setMessage(result.error.message || "An unexpected error occurred.");
  }

#

rustic star Jun 28, 2024, 4:57 PM

#

Do you see Apple Pay show up and work on this page?

https://docs.stripe.com/stripe-js/elements/payment-request-button

Payment Request Button

Collect payment and address information from customers who use Apple Pay, Google Pay, or Link.

clever reef Jun 28, 2024, 4:59 PM

#

I don't have Apple Pay account unfortunately (it's not supported in my country) my colleague was testing the charging end-to-end (he is US-based)

#

I think if I dont have Apple Pay => It wont show up as an option

#

Only card option shows up to me

rustic star Jun 28, 2024, 5:00 PM

#

Ahhh, okay. Yea, unfortunately without someone to test and report back I'm kind of at a loss for how to assist here

clever reef Jun 28, 2024, 5:03 PM

#

This is a test mode URL: https://qa-landing-page-celitech.vercel.app/ where you can test e2e (including payment)

But I think the VPN is causing some timeout issues from your end, do you think its possible to do anything about that? or maybe forward it to a colleague who can look into the issue?

rustic star Jun 28, 2024, 5:05 PM

#

Let me do a quick restart in case the issue has something to do with recent updates on my box. Brb

#

Okay, we're getting somewhere now. I'm not seeing Safari pop up at all on the test site. Did you register that domain too?

clever reef Jun 28, 2024, 5:10 PM

#

You mean Apple Pay?

#

let me double check

rustic star Jun 28, 2024, 5:10 PM

#

Err, yeah sorry. Apple Pay isn't showing up at all

#

I'm noticing scripts are being blocked too, so you might have some CSP configuration that's blocking your site from getting JS scripts from Stripe

Screenshot_2024-06-28_at_10.11.15_AM.png

#

But yeah, also the domain isn't registered

clever reef Jun 28, 2024, 5:17 PM

#

is it showing up now? on the test mode website

#

it was there already, but I disabled -> re-enabled it

grave quartzBOT Jun 28, 2024, 5:18 PM

#

rustic star Jun 28, 2024, 5:23 PM

#

Okay, it's showing up now, but I get this console error (second screenshot)

Screenshot_2024-06-28_at_10.22.48_AM.png

Screenshot_2024-06-28_at_10.23.02_AM.png

clever reef Jun 28, 2024, 5:25 PM

#

the alert that you are getting is exactly what my colleague got in his e2e testing (2nd picture)

do you have any idea what can be the reason?

silent badger Jun 28, 2024, 5:25 PM

#

Hi 👋

I took a look at your testing side as well. It looks like there is a frame hosting issue to me

#

But I only see it when Apple Pay isn't available

#

I am able to see Apple Pay currently

clever reef Jun 28, 2024, 5:26 PM

#

Hello @silent badger

silent badger Jun 28, 2024, 5:27 PM

#

Currently I see Card and Apple Pay and 2 console errors about hcaptcha

clever reef Jun 28, 2024, 5:28 PM

#

we added hcaptcha recently inside the Stripe element

could that have had an impact? (I see errors related to hcaptcha in the console.)

silent badger Jun 28, 2024, 5:31 PM

#

It could potentially impact some functionality, since it interupts expected flows.

But, just so I can have a clear understanding, what is the current state of your quesiton? I am able to see the Apple Pay button within the Payment Element on your testing site. Is there something else that is not working?

#

Okay, I think I see the issue. When I attempt to launch the Apple Pay modal window I get the following in the console:

Error: The code that shows the Apple Pay payment sheet must be invoked directly by a user activation event, like a click or a touch gesture. To prevent this error make sure the code that shows the payment sheet is at or near the top of your user gesture event handler, before any async or long-running code.

clever reef Jun 28, 2024, 5:33 PM

#

To clarify: we were able to see Apple Pay previously on our end, but the issue was that it failed to charge the end users as they are getting the same error above (that you got in your 2nd screenshot)

silent badger Jun 28, 2024, 5:33 PM

#

It looks like you are putting the captcha in the Buy button click event, am I right?

clever reef Jun 28, 2024, 5:34 PM

#

I just double checked and it looks like it

#

the button triggers the hcaptcha (which might or might not challenge the user)

on verification => hcaptcha generate token => new token triggers payment confirmation => payment confirmation is failing

#

I think this is the flow in summary

silent badger Jun 28, 2024, 5:35 PM

#

Okay yeah that will cause Apple Pay to fail

#

They don't like anything sitting between the button click and launching apple pay

#

You would need to put your hcaptcha somewhere else in your flow

clever reef Jun 28, 2024, 5:38 PM

#

the thing is, we had it in the 1st step only of our 3 steps flow

we were getting huge card testing attacks (people solving our captcha in the 1st step)
and then they can spam card testing in the 2nd flow (which doesn't have hcatpcha or bot detection tool)

so we solved that by having hcaptcha challenge in 1st step and 2nd step

#

so you please share any recommendation here ?

silent badger Jun 28, 2024, 5:39 PM

#

You need to launch payment confirmation within 1 second or so of the user actually clicking the Buy button.

#

If you expect Apple Pay to work

clever reef Jun 28, 2024, 5:40 PM

#

is this limit applicable to any other providers? or just Apple? Also please share the statement if its available anywhere in the docs (to share it with my dev team)

silent badger Jun 28, 2024, 5:42 PM

#

perhaps you could add hcaptcha when the payment form loads?

This is an Apple Pay specific requirement. Although Google might have something similar but less strict. It's not a "Stripe thing", it's a digital wallet thing.

clever reef Jun 28, 2024, 5:42 PM

#

got it

silent badger Jun 28, 2024, 5:42 PM

#

As for docs, the error message itself has the detail you need

The code that shows the Apple Pay payment sheet must be invoked directly by a user activation event, like a click or a touch gesture.

clever reef Jun 28, 2024, 5:43 PM

#

so I load/execute hcaptcha on page load instead of on button click

that would fix the issue while keeping the captcha on the 2nd page, right?

silent badger Jun 28, 2024, 5:43 PM

#

So anything that puts a delay between the user action and the display of the payment sheet breaks that contract

#

Yes

#

Apple Pay's issue here is the link between the button click and when the payment sheet is displayed to the user

#

So you could put hcatpcha in other palces as long as the button click was simplified to just confirming the payment.

clever reef Jun 28, 2024, 5:44 PM

#

got it, i actually spent like 10 hours maybe just debugging this, it was super confusing (and I thought its certificates related)

silent badger Jun 28, 2024, 5:45 PM

#

Yeah I can understand that pain 😅

clever reef Jun 28, 2024, 5:45 PM

#

😅

silent badger Jun 28, 2024, 5:45 PM

#

Certificates and domains can make Apple Pay pretty tricky

#

If you take a look here: https://docs.stripe.com/apple-pay?platform=web#verify-domain I had to get that warning added because it trips up so many people

clever reef Jun 28, 2024, 5:45 PM

#

I think the certificate is only to show/hide the Apple Pay button, right? (aka if its showing then its not certificate related) right?

silent badger Jun 28, 2024, 5:46 PM

#

The cert is how Apple's JavaScript will determine if you are a valid merchant to display Apple Pay at all

#

So if your cert is wrong (or your domain) you just won't see it as an option

clever reef Jun 28, 2024, 5:46 PM

#

so if its showing, all is good for the certificate and this is another type of issue

#

(our case)

silent badger Jun 28, 2024, 5:47 PM

#

Yup

clever reef Jun 28, 2024, 5:48 PM

#

AWESOME THEN, I APPRECIATE ALL YOUR HELP @silent badger @rustic star

#

Thank you guys alot, I'll be looking into hcaptcha and see how it goes

#

Many thanks ❤️

silent badger Jun 28, 2024, 5:49 PM

#

We're happy to shed what 💡 we can 🙂

it's why we're here

clever reef Jun 28, 2024, 5:50 PM

#

I appreciate it :D

#equilibrium_applepay-clickevent