tarantino-47_apple-pay-error | Stripe Developers | Page 1

wanton wadiBOT Jul 11, 2024, 5:16 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/1261008283553108048

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

next widget Jul 11, 2024, 5:17 PM

#

Hi 👋

Can you explain exactly when you see this error?

#

What stripe products are you using?
What point in your checkout flow does this occur?

rotund berry Jul 11, 2024, 5:23 PM

#

when I try to pay using apple pay or google pay

#

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

next widget Jul 11, 2024, 5:24 PM

#

Okay this error generally means the Apple/Google pay modal is open on another tab. At least that is the only away I've been able to reliably reproduce that behavior

#

Tab, window, browser, etc.

rotund berry Jul 11, 2024, 5:26 PM

#

hm, not possible, I don't have it opened anywhere

next widget Jul 11, 2024, 5:28 PM

#

What browser are you loading this in?

#

Is this in your Stripe integration?

rotund berry Jul 11, 2024, 5:29 PM

#

yes

#

google chrome

#

it's a production bug which I'm trying to fix right now

next widget Jul 11, 2024, 5:30 PM

#

Sorry but you are still not telling me much about the actual problem here

rotund berry Jul 11, 2024, 5:32 PM

#

I'm using Payment Element and Payment Request Button. I don't use them on the same page. I use them in a diff pages only

next widget Jul 11, 2024, 5:33 PM

#

Okay and are you explicitly disabling digital wallets in the payment element?

rotund berry Jul 11, 2024, 5:33 PM

#

hm, don't think so, do you know how to check this?

hard wing Jul 11, 2024, 5:34 PM

#

Is there a way to reproduce your bug easily? Like this error usually just means you have another Chrome window that is already showing the PaymentRequest UI and you forgot to cancel it/close it

rotund berry Jul 11, 2024, 5:34 PM

#

#

there is one thing, I am ignoring the incomplete error in my stripe integration. but it should not be related I think:

    const { error: submitError } = await elements.submit();

    if (submitError?.code === 'incomplete') {
  // just ignore it and stop submit function
}

hard wing Jul 11, 2024, 5:39 PM

#

My read is that you are already doing PaymentRequest somewhere else. Maybe try closing all your Chrome windows first or rebooting to see if that fixes it?

Also you definitely should handle the error if any

rotund berry Jul 11, 2024, 5:41 PM

#

the thing is that I'm not the only one who seeing it. almost every person can replicate it

next widget Jul 11, 2024, 5:41 PM

#

Do you have a front-end that is publicly accessible where we could reproduce this error?

rotund berry Jul 11, 2024, 5:42 PM

#

Also you definitely should handle the error if any
I just wanted to not show an error if a user closes google pay of apple pay modal

#

yes

#

https://app.usmobile.com/

#

you'll need to create an account. or I can do that for you

next widget Jul 11, 2024, 5:46 PM

#

A test account would help, thanks

rotund berry Jul 11, 2024, 5:46 PM

#

vlad+teststripe@usmobile.com
Test123$

#

just a sec

#

go to this page:
https://app.usmobile.com/dashboard/app/new-plan-checkout?category=FT

#

go to checkout and select apple pay or google pay

next widget Jul 11, 2024, 5:50 PM

#

No errors, a successful launch of the modal

Screenshot_2024-07-11_at_10.50.27_AM.png

rotund berry Jul 11, 2024, 5:51 PM

#

hm, can you check apple pay?

next widget Jul 11, 2024, 5:54 PM

#

Okay this time I got errors but not the ones you described

Screenshot_2024-07-11_at_10.54.06_AM.png

rotund berry Jul 11, 2024, 5:54 PM

#

yes

next widget Jul 11, 2024, 5:54 PM

#

In this case it looks like there are some hcaptcha calls occuring here

rotund berry Jul 11, 2024, 5:55 PM

#

why whould it be related?

next widget Jul 11, 2024, 5:57 PM

#

Apple Pay will fail to load if there are other processes like hcaptcha that run between when the user clicks the "Pay" button and when the Apple Pay UI is displayed

rotund berry Jul 11, 2024, 5:59 PM

#

hm

#

you mean hcaptcha request is a part of stripe?

next widget Jul 11, 2024, 6:06 PM

#

I would need to verify that. I just had someone add captcha to their checkout flow and it broke their apple pay integration because of where they put it, so I want to rule that out

rotund berry Jul 11, 2024, 6:09 PM

#

hm

#

can you please update me once you have any updates

#

wonder if I need to send a ping message to this thread so it won't close

next widget Jul 11, 2024, 6:19 PM

#

Well I'm digging around through your front-end but it's really strange. I don't see any errors when using Google Pay in Chrome but Apple Pay in Safari fails every time

rotund berry Jul 11, 2024, 6:21 PM

#

you only need to check this page
https://app.usmobile.com/dashboard/app/new-plan-checkout?category=FT

since this is the most recent changes, which include Payment Element

next widget Jul 11, 2024, 6:21 PM

#

That's the page I was checking

#

Google Pay works fine, Apple Pay fails.

rotund berry Jul 11, 2024, 6:22 PM

#

ok ok

rotund berry Jul 11, 2024, 6:37 PM

#

hcaptcha is not really a part of our application

next widget Jul 11, 2024, 6:38 PM

#

Which is really bugging me. Because it means that it isn't something obvious in your code (like loading in an iframe)

rotund berry Jul 11, 2024, 6:40 PM

#

you think an iframe on our site could be a reason of failing hcaptcha which leads apple pay to fail?

next widget Jul 11, 2024, 6:40 PM

#

I think the hcaptcha is a red herring, not important

#

I do not think this is due you using an iframe on your site.

rotund berry Jul 11, 2024, 6:42 PM

#

ok , gotcha

wanton wadiBOT Jul 11, 2024, 6:45 PM

#

rotund berry Jul 11, 2024, 6:56 PM

#

I plan to disable apple pay temporarily, till I/we figure out what's the reason behind this

next widget Jul 11, 2024, 6:56 PM

#

Sorry but could you share your account ID so we can check your Apple Pay domain registration?

rotund berry Jul 11, 2024, 6:56 PM

#

sure

#

I'll DM you

next widget Jul 11, 2024, 6:57 PM

#

I cannot receive DMs and I'm going off shift soon so my colleague @vast echo will likely continue on here.

wanton wadiBOT Jul 11, 2024, 6:59 PM

#

tarantino-47_apple-pay-error

rotund berry Jul 11, 2024, 7:01 PM

#

can i delete the key from chat?

vast echo Jul 11, 2024, 7:03 PM

#

Hi 👋 jumping in as my teammate needs to step away soon. I'm not seeing a key shared in this thread.

rotund berry Jul 11, 2024, 7:03 PM

#

sorry account id

#

this one acct_19ByUbFbFOzNrsPE

vast echo Jul 11, 2024, 7:04 PM

#

Then I won't have it for reference though, those IDs aren't sensitive

rotund berry Jul 11, 2024, 7:04 PM

#

I see

vast echo Jul 11, 2024, 7:08 PM

#

Hm, nothing's jumping out at me so far. Still digging.

rotund berry Jul 11, 2024, 7:09 PM

#

thank you

#

so the thing is that apple pay works when I use Payment Request Button. When I use Payment Element it throws an error

#

Payment Element is withing this flow
https://app.usmobile.com/dashboard/app/new-plan-checkout?category=FT

vast echo Jul 11, 2024, 7:11 PM

#

Can you share the code you're using to initialize the instance of Elements, and of the Payment Element instance, that you're using?

rotund berry Jul 11, 2024, 7:11 PM

#

in other places we use Payment REuest Button

#

sure

#

const stripePromise = loadStripe(appConfig.stripeKey);
const options = {
  currency: 'usd',
  loader: 'always',
  mode: 'setup',
};

function Provider({ children, ...rest }: ProviderProps): React.ReactNode {
  if (!rest?.isAddCardFlow) {
    // it's needed for the confirmationToken creation
    options.paymentMethodCreation = 'manual';
  }

  return (
    <Elements options={options} stripe={stripePromise}>
      {children}
    </Elements>
  );
}

#

  useEffect(() => {
    return () => {
      setFormState({ isFormRendered: false });
    };
  }, []);

  return (
    <div style={{ minHeight: 180 }} className={className}>
      <PaymentElement
        options={{
          layout: {
            type: 'accordion',
            defaultCollapsed: false,
            radios: true,
            spacedAccordionItems: false,
          },
          // paymentMethodOrder: ['google_pay', 'apple_pay', 'card'],
          paymentMethodOrder: ['google_pay', 'card'],
          wallets: {
            googlePay: isAddCardFlow ? 'never' : 'auto',
            // applePay: isAddCardFlow ? 'never' : 'auto',
            applePay: 'never',
          },
        }}
        onChange={handlePaymentElementChange}
        onReady={handlePaymentElementReady}
      />
    </div>
  );

vast echo Jul 11, 2024, 7:21 PM

#

Ah, I think I remember what this may be. How are you calling confirmPayment? I think it's probably too far from being directly called by the user input from the browser.

rotund berry Jul 11, 2024, 7:24 PM

#

ah, I remember I faced this issue before

#

well

#

just a sec

vast echo Jul 11, 2024, 7:27 PM

#

Sure thing! Apple is pretty picky about their modal being surfaced by the user input. I've seen two different forms of limitations they have in place to help enforce that. One is that the modal's display can't be delayed by more than about a second from form submission, but I'm getting the sense the error is showing up before that. So I think we're looking at the other limitation, where they block you from showing the modal if you do so too far down in a stack of functions.

Last time I saw this, it was because there was captcha code being called on form submit, and that captcha code was then trying to call confirmPayment.

rotund berry Jul 11, 2024, 7:31 PM

#

yo bro, I think youre right

#

checking

#

so yes, basically that was the reason

#

awesome, but I have a question

#

this is my code:
const handlePrePayment = async () => {
await updateStripeForm();
await new Promise((resolve) => setTimeout(() => resolve(user), 500));
await validateStripeForm();
await createConfirmationToken();
};

#

const updateStripeForm = () => {
if (isPaymentIntentFlow) {
elements.update({
mode: 'payment',
paymentMethodTypes: ['card'],
amount: formatPlatformPayPrice(amount),
});
}
}

#

I added my custom timeout, in order to fix this:
IntegrationError: You cannot update Payment Request options while the payment sheet is showing.

vast echo Jul 11, 2024, 7:41 PM

#

Oh, it looks like you're building a two step confirmation flow, where you're trying to create a Payment Method first. Does that sound right?
https://docs.stripe.com/payments/build-a-two-step-confirmation

If so it's actually the calling of .submit that we're interested in. Sorry about the mixup.

rotund berry Jul 11, 2024, 7:41 PM

#

yes

vast echo Jul 11, 2024, 7:42 PM

#

Gotcha

rotund berry Jul 11, 2024, 7:42 PM

#

your guess was correct

#

once I removed my custom timeout - apple pay started working

#

but in google pay an amount is 0 istead of 100

#

that's why I added my custom timeout, so that the 100 price propagated to the google pay modal

vast echo Jul 11, 2024, 7:43 PM

#

Hm, am I looking at the wrong test flow? I'm seeing an amount of $45 on your checkout page, then seeing the same amount in the GPay modal.

rotund berry Jul 11, 2024, 7:43 PM

#

but in the other hand that timeout broke apple pay

#

yes, 45 sorry

#

i mean it doesnt really matter how much

#

in google pay it's 0

#

you may not see this case n the link I sent you

#

sorry, did you get what I mean

vast echo Jul 11, 2024, 7:48 PM

#

Hm, yeah I'm not seeing that behavior. I'm seeing matching amounts on my end:

rotund berry Jul 11, 2024, 7:48 PM

#

yes it will work fine as in production we have that custom timeout I added to fix that

#

but it broke apple pay on the other hand

#

Im not sure what to do

vast echo Jul 11, 2024, 7:50 PM

#

It's hard to think about what could be going wrong for a flow I can't see. Is the error you're describing still being encountered even when you're using the Payment Element?

When are you trying to update the Elements instance in your flow? Is that before you call .submit?

rotund berry Jul 11, 2024, 7:51 PM

#

yes it's before

#

I do this first:
elements.update({
mode: 'payment',
paymentMethodTypes: ['card'],
amount: formatPlatformPayPrice(amount),
});

vast echo Jul 11, 2024, 7:52 PM

#

That should be fine then

rotund berry Jul 11, 2024, 7:53 PM

#

yea it's fine, but amount in the gpay modal is not being updated

vast echo Jul 11, 2024, 8:01 PM

#

I'm sorry, it's really hard for me to grasp what you're describing. If elements.update succeeds, the amount displayed should be updated. Are there errors being thrown when you call that?

rotund berry Jul 11, 2024, 8:02 PM

#

no, you know, I think I resolved it

#

thank you so much!

#

have a good day!

#tarantino-47_apple-pay-error