Only display Apple Pay payment method if supported

[rvdsteege]

With for example WooCommerce, our Apple Pay gateway is displayed as payment method at checkout even though this might not be supported by the browser/device.

A customer shared below CSS to only display this payment method in Safari,

.payment_method_pronamic_pay_apple_pay {
    display: none
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (display:flow-root) {
        /* Safari */
        .payment_method_pronamic_pay_apple_pay {
            display: block !important;
        }
    }
}

However, these CSS hacks seems to need updates on browser updates:

• https://stackoverflow.com/a/25975282/9993000
• https://browserstrangeness.bitbucket.io/css_hacks.html#safari

Another way to only display the Apple Pay payment method if applicable, would be by checking window.ApplePaySession as described in Checking for Apple Pay Availability.

Internal Help Scout ticket: https://secure.helpscout.net/conversation/1798706229/23596

[remcotolsma]

For the Adyen web drop-in it would probably be nicer to move it to the WooCommerce checkout page so this is no longer an issue.

<div id="payment" class="woocommerce-checkout-payment">
    <ul class="wc_payment_methods payment_methods methods">

    </ul>

    <!-- Adyen web drop-in -->
</div>

https://github.com/woocommerce/woocommerce/blob/be041e0d386082644c17b59ddc406f7758302db2/plugins/woocommerce/templates/checkout/payment.php#L25-L37

No idea if this is possible, probably won't be easy, but might be the solution to this issue.

[rvdsteege]

That might also be an option, but moving the drop-in to the checkout page will probably also result in losing support for extensions such as Payment Gateway Based Fees.

@remcotolsma also mentioned adding a hidden field for Apple Pay support to the checkout form, which will then be included in the WooCommerce ajax action update_order_review, so we can filter available gateways server-side. The advantage in comparison to moving the drop-in to the checkout page, is that this approach will also function for the Apple Pay payment method through other supported gateways.