ryancwalsh

[compact pasture]

Hello

So yeah this is a limiation on Apple's end about displaying Apple Pay

Basically they have a 1 second security limitation

Where the modal must show within 1 second of the gesture handler

So what this means is that you can't do anything in your click handler other than call confirmPayment() immediately

If you are calling your backend for instance, you need to move that earlier in your flow.

[lapis jay]

Thanks. So are you confirming that these 2 errors are the same?

[compact pasture]

Yes one is what you see in the UI and one is what you see in console but they are the same root cause.

If you want to simulate it to reproduce reliably you can add a setTimeout

And just wait to call confirmPayment() till after a couple seconds

[lapis jay]

Ok. I guess my challenge is that we have PaymentElement nested so deep within so many components, to me it seems like the top level component is triggered by a user action.

I haven't been able to find a useEffect or something that would be causing any delay. We've spent so many hours looking for it.

[compact pasture]

What does your submit handler code look like for when your "pay" button is pressed?

[lapis jay]

Ohhh, the problem is within the submit handler... 🤦‍♂️ I've been looking more at making sure that user actions are triggering the appearance of PaymentElement.

I don't know why I was thinking that way.

In the submit handler, I do see await logEvent( before:

  if (!stripe || !elements) {
    // Stripe.js hasn't yet loaded. Disable form submission until Stripe.js has loaded.
    return;
  }

  // https://stripe.com/docs/payments/save-card-without-authentication?platform=web#add-elements-to-your-page
  // https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=setup
  // https://stripe.com/docs/payments/save-and-reuse
  const { error: elementsError } = await elements.submit();

  if (elementsError) {
    let errorMessageToShowToUser =
      elementsError.message ?? errorUnableToSavePaymentMethod;
    if (errorMessageToShowToUser === "Please fill in your card details.") {
      /* Stripe's "Please fill in your card details." error is confusing to a user who clicked Apple Pay and then Cancel.
      So let's use a more generic error message that is slightly better and could still apply to cards. */
      errorMessageToShowToUser = "Please provide your payment method details.";
    }
    console.error({ elementsError }, errorMessageToShowToUser);
    setErrorMessage(errorMessageToShowToUser);

    return;
  } else {
    const { paymentMethod, error } = await stripe.createPaymentMethod({
      element: elements.getElement(
        PaymentElement
      ) as stripeJs.StripePaymentElement,
    });
    if (error) {

[compact pasture]

Yep

[lapis jay]

Can you please leave this thread open for a moment while I try to prove that this is the problem? I might have further questions. I will try replacing the logEvent with a timeout. Then I'll remove it.

[compact pasture]

So I would assume logEvent() is calling your backend

Yep sounds good

[lapis jay]

So far, all of my local ngrok MacOs Safari testing supports this idea that the await logEvent( was the problem.

I'm very excited to deploy this to staging and have the team do further testing on this. Maybe we can get Apple Pay deployed to production today.

Thanks!!