Apply Pay Device Detection

[alphabet]

Adding the Apple Pay button breaks my site's style on Non-Safari / iOS devices.

Is there a way to detect if the user's device has apple pay so I can change the site structure to accommodate the pay button?

I was thinking something like this but it would be difficult to test. I'm wondering if there is a different variable?

<mvt:assign name="g.HTTP_USER_AGENT" value="s.HTTP_USER_AGENT" />
<mvt:if expr="('AppleWebKit' CIN g.HTTP_USER_AGENT ) AND ('Safari' CIN g.HTTP_USER_AGENT) AND NOT('Chrom' CIN g.HTTP_USER_AGENT)">
  <mvt:assign name="g.has_apple_pay" value="1" />
</mvt:if>

[lesliekirk]

Interesting, I thought the button itself detected the browser and that's why is doesn't display except on an iPhone or a Mac using Safari on the latest OS.

[alphabet]

Hi Leslie,

You are correct.

I found the clientside applepay.js file and it changes the #applepay-button element display style to none. This makes the element occupy no space on the page.

I use Foundation 6 Grid for responsive design and since the Pay Button takes up no space on Non-Safari / iOS devices then the grid collapses left and breaks my style on desktop.

If the apple.js code changed it to button.style.visibilty = 'hidden'; then I probably wouldn't have the problem as the button is still there, just not visible.

There are probably several ways to solve my problem - a g.apple_pay variable, modifying the applepay.js, or hacking the CSS. I'll probably use a has_height CSS hack.

Miva's Apple Pay examples show the Pay Button styled below Checkout buttons so the button.style.display = '' has no effect on their site design.

I'm wondering if anyone else displays Apple Pay button horizontally along others?

[Brennan]

A couple options, you could copy the applepPay.js and create your own file and modify the JS according. Or you can add your own JS to overwrite our JS to modify the button to be visibility hidden.

[alphabet]

Thank you.

[kitdang]

Where do I go to locate the applepay.js file? I would like to style my applepay button the same way I style my checkout button.

[AHerb]

I replied you in your other topic.
https://www.miva.com/forums/forum/de...yling-question