What am I missing in my checking for whether or not to offer Apple Pay on my website?
<script async crossorigin
src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"
></script>
...
<style>
apple-pay-button {
display: none;
}
</style>
...
<apple-pay-button buttonstyle="black" type="plain" locale="en-US" onclick="startApplePay('${APPLE_PAY_MERCHANT_ID}','${paymentForm.amount}');"></apple-pay-button>
So, the button is not displayed by default. I only change the style to displayed if:
window.onload = function() {
if (isApplePaySupported()) {
document.querySelector("apple-pay-button").style.display = "inline-block";
};
}
function isApplePaySupported() {
return (window.PaymentRequest &&
window.ApplePaySession &&
ApplePaySession.canMakePayments() &&
ApplePaySession.supportsVersion(applePayVersion));
}
Yet, once in a while a click comes through that tries to create a PaymentRequest with
const applePayMethod = {
"supportedMethods": "https://apple.com/apple-pay",
"data": {
"version": applePayVersion,
"merchantIdentifier": merchantIdentifier,
"merchantCapabilities": [
"supports3DS"
],
"supportedNetworks": [
"amex",
"discover",
"masterCard",
"visa"
],
"countryCode": "US"
}
};
and results in:
NotSupportedError, The payment method is not supported
What else might be "not supported" in the request for this particular user/device/wallet? In particular, that could be known immediately when the PaymentRequest is created, but before any payment instrument from the wallet is selected?
And, is there anything I could detect before showing the button?
Or, is it even possible for the button to be clicked by some kind of automation, even if it's not displayed?
