Introduction

This is a common issue that affects sites with Apple Pay checkouts. It occurs during the checkout process when an Apple Pay session is started; the issue either prevents the payment sheet from appearing or causes it to disappear before the session ends properly. This results in the user being unable to checkout via Apple Pay, as they cannot complete or end their current payment session or start a new session.

Error Description

Error Signature:

JS Error: Page already has an active payment session.

Error Message:

Page already has an active payment session.

Issue Discovery

To understand this issue, we must examine the steps of the Apple Pay logic flow. Consult Apple's guide to Requesting an Apple Pay Payment Session for a detailed look.

Merchant validation is the first step when submitting a payment via Apple Pay. This involves the following:

  1. Create an ApplePaySession object.
  2. Call the .begin() function with the new ApplePaySession object to present the payment sheet and initialize the merchant validation process.
  3. Once the merchant validation process is started, the onvalidatemerchantfunction is called with a ApplePayValidateMerchant object. This function calls your server, which in turn makes a new request to the remote Apple Pay server.
  4. The Apple Pay server responds with a Merchant Session object for your server to pass into the completeMerchantValidation function. This completes the validation process and allows the user to make a payment with Apple Pay

The active payment session error indicates that the onvalidatemerchant function has failed, as it cannot request a new Merchant Session object from the Apple Pay server. This is because of the following rules Apple enforces for the object:

For more details, refer to this Discussion from the Apple support forums from a developer experiencing the same error with their Apple Pay session implementation.

In the discussion above, Apple support suggested potential causes:

Uncovering the specific cause requires further investigation, as it likely depends on your implementation of the Apple Pay merchant validation process. However, in our experience with multiple Noibu clients, we’ve seen the following causes of the error.

Error Cause #1: User clicks Apple Pay multiple times

Since the Apple Pay merchant validation session may take several seconds, the user may not understand that they've triggered the start of an Apple Pay session, and may try the Apple Pay button multiple times. Unfortunately, this prevents the Apple Pay form from appearing and triggers the error, blocking the user from using Apple Pay.

There is an interesting discussion of this scenario on the Stripe Github.

From this discussion, developers suggested disabling the Apple Pay button after a user click until the merchant validation process completes. It could also help to add a loading indicator or confirmation that the click was effective.

Error Cause #2: Apple Pay triggered without user intervention

The site implementation of Apple Pay may have a bug that causes the site to trigger the merchant validation flow on the checkout page before the user has clicked the Apple Pay button. This summons a payment form that isn't visible to the user, and when the user does click Apple Pay, they are unable to proceed.

This scenario is less common, but not impossible.

Risks and Mitigation

Once this error occurs, a user cannot checkout using Apple Pay unless they refresh or manually force the Apple Pay session to end. This can cause significant friction for users, especially since the error usually doesn’t usually produce a visible error message. We recommend prioritizing the issue and actioning a fix as soon as possible.