ApplePay button via PaymentRequestButtonElement fails with "Page already has an active payment session."

[firemuzzy]

Bug report

Describe the bug

Apple pay button fails with "InvalidAccessError: Page already has an active payment session." after opening and closing it a couple of times.

You do not have such a problem on your apple pay marketing page https://stripe.com/apple-pay

Not sure where to file this I am seeing this in my usage of <PaymentRequestButtonElement>, and it also shows up in this demo app.

Is there a know work around other than reloading the page? This is a pretty bad bug for SPA applications.

To Reproduce

• Connect the safari debugger to the iPhone
• Tap Apple Pay button
• Cancel Apple Pay sheet
• Repeat Tapping and Canceling until the button no longer summons an ApplePay sheet. For me it happens after about 4 times.

Expected behavior

The Apple Pay button should always summon the pay sheet

Screenshots

I have a video too but I need to blur out my address. If somebody can tell me of a free or cheap software I can use to blur out the address from the apple pay sheet then i'll post the video too.

If applicable, add screenshots to help explain your problem.

System information

• OS: iOS 13.4.1
• Browser: safari mobile

Additional context

[firemuzzy]

not reproducible on iOS 14.0

[hofman-stripe]

I cannot reproduce, my device is on iOS 14.

It's also an error thrown and passed through from ApplePay itself. Can you reproduce on Apple's own demo site?

[firemuzzy]

@hofman-stripe it is not reproducible on apple's demo site. It looks to be a combination of stripe implementation and older iOS versions, unfortunately i can't update to 13.5 through 13.7 as its 14 only now so I can't test those version :-( . I can't quite tell where this bug stops.

I still get a lot of 13.6 and up traffic onto the site I ant to use this on.

[saket1singh]

Hi @firemuzzy .

Did you find any solution on this ? I am also facing same issue in IOS and IPAD.

[Isakdl]

Any news on this? I'm receiving this error from users with ios 14.6 as well as older ios 13 versions.

[nopelluhh]

For anybody else running into this issue, the error is reproducible (both in this demo and Apple's demo per @hofman-stripe 's callout) by double/rage clicking the ApplePay button. I believe this might be fixable on the Stripe side of things with a no-op for calls to paymentRequest.show() until the returned promise is not pending (also equally fixable in userland if a bit inconvenient)

[andreimc]

we see a lot of these @nopelluhh how do we fix in userland ?

[simonsmith]

Can confirm that @nopelluhh is correct on the diagnosis. We currently see a lot of this in our logs. One possible solution we are investigating is disabling the button submit and enabling on cancel event:

  const [disabled, setDisabled] = useState(false);

  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    setDisabled(true);
    paymentRequest?.show();
  };

   paymentRequest.on('cancel', () => {
      setDisabled(false);
   });

Haven't tested this robustly yet

Edit: I am recreating this on desktop Safari. But all our Sentry logs show the users encountering the issue on mobile iOS 14/15

[ankurk91]

I can see same error on Sentry.