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!
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.