[BUG]: Double-clicking PaymentRequestButton triggers "InvalidAccessError Page already has an active payment session" error

[m-nathani]

What happened?

When users double-click the PaymentRequestButtonElement (specifically with Apple Pay), Stripe throws a warning/error: "Page already has an active payment session"

This error is captured in production by error monitoring tools like Sentry, creating noise and concern even though the payment typically completes successfully from the first click.

Sentry Stack Trace:

Expected Behavior

The button should handle double-clicks gracefully, similar to how ExpressCheckoutElement handles multiple clicks, without throwing errors or requiring developers to implement custom double-click prevention.

Actual Behavior

• First click: Opens Apple Pay sheet successfully
• Second click (within quick succession): Throws error and gets reported to error monitoring systems
• This creates unnecessary error reports in production monitoring tools

Proposed Solutions

Option 1: Internal double-click prevention (preferred)

• PaymentRequestButtonElement should automatically prevent multiple simultaneous payment sessions, similar to ExpressCheckoutElement

Option 2: Add a disabled prop

• Expose a disabled prop on PaymentRequestButtonElement to allow developers to easily disable the button during processing:

<PaymentRequestButtonElement 
  options={{ paymentRequest }}
  disabled={isProcessing}
/>

Current Workaround

Developers currently need to implement custom solutions using pointer-events, click handlers, or wrapper elements etc:

<div style={{ pointerEvents: isProcessing ? 'none' : 'auto', opacity: isProcessing ? 0.6 : 1 }}>
  <PaymentRequestButtonElement ... />
</div>

// or 

<PaymentRequestButtonElement
  onClick={(event) => {
    if (isProcessing) {
      event.preventDefault();
      return;
    }
  })}

This adds unnecessary complexity for what should be handled internally by the component and are also NOT reliable most of the time.

Impact

• Creates false-positive errors in production monitoring
• Requires boilerplate code to prevent a common user behavior
• Inconsistent with other Stripe payment components that handle this automatically

---

Would you like me to adjust anything in this issue?

Environment

• Package: @stripe/react-stripe-js
• Browser: Safari (Apple Pay)
• Payment Method: Apple Pay via Payment Request API

Reproduction

https://umai.sentry.io/share/issue/cc7d3668b28c4e3c81bc86c8cf6b7cc6/

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.