Inconsistent buttons on checkout

  • Resolved …

    (@lacriptoteca)


    2 years, 7 months ago

    You can find here 2 videos showing the problem:

    https://www.dropbox.com/scl/fo/5p6hkcnpew133fw1rxmqp/h?dl=0&rlkey=bxk2kqu3baq4m8zx322ci2y5r

    There are several inconsistencies in the checkout using the plugin that makes the whole page look unprofessional. Both in the top express checkout and in the bottom selector the ApplePay and Google pay buttons have different styles and behaviors:

    1 – Hover: See how in both cases ApplePay doesn’t have a hover effect, it doesn’t change the color and it doesn’t show the lille hand, so it seems to be broken, just a non-working static image. Not looking profesional at all.

    2 – Font: Both have different fonts, either top checkout or bottom selector. The ApplePay font its bold, heavier, inconsistent with the GPay font.

    3 – Size: As you can see the size varies, the ApplePay button is not fully expanded, its a smaller version with no hover effect so it looks untrustworthy in comparison with GPay.

    4 – The card logos are all cramped as you can see on the first video. There is no space between the text (either “pay with card” or whichever custom text) and the logos. Not only that, but I think that even the logos have no space, so the result its a cramped looking row not very good looking.

    Those are checkout examples but some of the things are also present in cart or product page as well. Looking at the CSS I see for example that the GPay button has a minimum width while the ApplePay button has a maximum width. As I said, lot of inconsistencies!

    • This topic was modified 2 years, 7 months ago by ....
Viewing 1 replies (of 1 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    1 – Hover: See how in both cases ApplePay doesn’t have a hover effect, it doesn’t change the color and it doesn’t show the lille hand, so it seems to be broken, just a non-working static image. Not looking profesional at all.

    You’ll need to take that up with Apple Pay, as their design guidelines don’t mention the use of hover affects. If your theme isn’t assigning a cursor pointer, you can add that using some simple css. Any additional styling that goes beyond the Apple Pay Brand Guidelines would be added by you since it’s a deviation from their recommendations. https://developer.apple.com/design/human-interface-guidelines/technologies/apple-pay/buttons-and-marks/

    2 – Font: Both have different fonts, either top checkout or bottom selector. The ApplePay font its bold, heavier, inconsistent with the GPay font.

    That’s because they’re two different payment methods, created by two different companies that don’t have the same font or style guidelines. For example, the GPay button is rendered inside an iFrame using the GPay Javascript SDK. They provide the SDK so the button rendering is consistent and controlled by their code.

    – The card logos are all cramped as you can see on the first video. There is no space between the text (either “pay with card” or whichever custom text) and the logos. Not only that, but I think that even the logos have no space, so the result its a cramped looking row not very good looking.

    We can’t account for how every theme in the ecosystem will handle styling. The plugin uses a base set of margin and padding for the buttons but if your theme overrides that using more specific css selectors, then you will need to make adjustments. Based on the video, your theme is overriding the plugin’s styling and causing the buttons to not have any spacing.

Viewing 1 replies (of 1 total)
  • The topic ‘Inconsistent buttons on checkout’ is closed to new replies.