applePayCapabilities undefined on `window.ApplePaySession`

Good day,

I'm attempting to check whether Apple Pay is available using the ApplePay JS API. Prior to upgrading to Safari 18.0+, I was using window.ApplePaySession.canMakePayments to show/hide the Apple Pay option.

I've noticed with the new Safari version, the preferred method of checking the availability of Apple Pay is by using the applePayCapabilities method. When logging and inspecting the window object in Safari 18.0.1, this method seems to be missing from the ApplePaySession object.

Additionally, my conditional code which is dependent on applePayCapabilities does not execute:

 if (typeof window !== 'undefined' && window.ApplePaySession) {
      // Safari version 17 and lower
      if (window.ApplePaySession.canMakePayments) {
        // set Apple Pay available
      }
      /**
       * On Safari version 18 and higher, we must check whether a user has a card saved in their wallet.
       * If this is the case, Apple Pay must be presented as the primary payment method. In our case,
       * this means selecting Apple Pay as the default payment method.
       */
      if (window.ApplePaySession.applePayCapabilities) {
        const merchantIdentifier = '***';
        const promise = window.ApplePaySession.applePayCapabilities(
          merchantIdentifier
        );
        promise.then(capabilities => {
          switch (capabilities.paymentCredentialStatus) {
            case ApplePayCapabilities.CREDENTIALS_AVAILABLE:
              // set Apple Pay as available and default
              break;
            case ApplePayCapabilities.UNSUPPORTED:
              // not available
              break;
            default:
              // set Apple Pay as available only
          }
        });
      }
    }

I feel I'm missing something very simple here, help would be greatly appreciated!

Answered by Frameworks Engineer in 810215022

Starting in iOS 18 some of the JS features are only available when you include the Apple Pay JS SDK.

This is because Apple Pay is now available on multiple browsers and operating systems, not just Safari. Make sure you're including the Apple Pay JS SDK by adding this to your page:

<head>
    <script crossorigin 
      src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"> 
    </script>
</head>

This should both a) allow ApplePayCapabilties to appear, and b) enable support for Apple Pay on other browsers.

Same issue for me also.

I found window.ApplePaySession.applePayCapabilities as undefined

While window.ApplePaySession.canMakePaymentsWithActiveCard and window.ApplePaySession.canMakePayments to be defined in the console

The official document states that applePayCapabilities requires - Safari Desktop 18.0+ Safari Mobile 18.0+

"applePayCapabilities" Apple Docs Link - https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/4440085-applepaycapabilities

My MacOS version - Sequoia 15.0.1 Safari version - 18.0.1

Anyone how we can fix this, or is it something that we are doing it wrong?

Thanks for the help

Starting in iOS 18 some of the JS features are only available when you include the Apple Pay JS SDK.

This is because Apple Pay is now available on multiple browsers and operating systems, not just Safari. Make sure you're including the Apple Pay JS SDK by adding this to your page:

<head>
    <script crossorigin 
      src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"> 
    </script>
</head>

This should both a) allow ApplePayCapabilties to appear, and b) enable support for Apple Pay on other browsers.

applePayCapabilities undefined on `window.ApplePaySession`
 
 
Q