Do not show Apple Pay in unsupported browsers

[stefandoorn]

Using the 5.1 plugin, we do see Apple Pay showing up on the frontend, e.g. in Google Chrome, or Safari Desktop. I just learned that Apple Pay really only works on iOS Safari, so it doesn't make sense right now to show it to other browsers. I was trying to make it work in Google Chrome (expecting some way to login to Apple) but that does not seem to be possible, but was hard to find out.

There seems a CSS way of filtering this: https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons. While testing Bancontact we saw that filtering is done client side, so I do think we should be able to handle this client side.

[hnsr]

@stefandoorn I may have informed you wrong, at the core Apple Pay does support payments on the desktop in Safari as of macOS Sierra, and Adyen does as well: https://www.adyen.com/blog/apple-pay-for-the-web-now-available

Having some difficulty figuring out if this is also supported in the Adyen Magento plugin however, so at least some documentation on this would be nice :)

[stefandoorn]

Thanks @hnsr. That still leaves no support from Apple for e.g. Google Chrome, Edge, etc.

[cyattilakiss]

Hi @stefandoorn ,

Thank you for raising this issue. We do have a documentation about the supported devices: https://docs.adyen.com/payment-methods/apple-pay And you can find this Apple link in our documentation to the device list: https://support.apple.com/en-gb/HT208531

About the frontend filtering it is indeed a good idea. We are going to pick this item into our backlog but at first we are going to implement the adyen checkout web component for apple pay: https://docs.adyen.com/payment-methods/apple-pay/web-component which has a built in checking function for the supported devices and browsers. Example for that:

const applepay = checkout.create('applepay', {
            // all the config
        });

applepay
    .isAvailable()
    .then(isAvailable => {
        // If Available mount it in the dom
        if (isAvailable) applepay.mount('#applepay-field');
    })
    .catch(e => {
        console.warn(e);
    });

Best, Attila Adyen

[stefandoorn]

Hi @cyattilakiss, that sounds promising! Could you let us know the priority on the roadmap and when this is expected to be released?

[cyattilakiss]

Hi @stefandoorn ,

The fix (suggested by you: https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons.) has just been released in the version 6.0.0 You can also check the changes in the pull request #648

Please note that this is a major release, including breaking changes for backwards compatibility so if you extended or overwrote the plugin especially on the checkout frontend it may break.

I will close this issue for now, but please feel free to reopen it if you still experience the issue after the upgrade.

Best, Attila Adyen