Announcement

Collapse
No announcement yet.

Apply Pay Device Detection

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Apply Pay Device Detection

    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?

    Code:
    <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>
    http://www.alphabetsigns.com/

    #2
    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.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #3
      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?



      http://www.alphabetsigns.com/

      Comment


        #4
        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.

        Brennan Heyde
        VP Product
        Miva, Inc.
        [email protected]
        https://www.miva.com

        Comment


          #5
          Thank you.
          http://www.alphabetsigns.com/

          Comment


            #6
            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.

            Comment


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

              Comment

              Working...
              X