Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 17, 2020 at 6:40 am #1223237
    GeoffreyTMoore

    Hi there, I just launched my site to the public and did some testing with friends and discovered that some iPhones are not able to see the text when they enter their Credit Card info on the checkout page from Woocommerce. My website builder’s iPhone 11 had no problem when she checked, but some other phones reported they could not see the text and it made it impossible to know if they were typing the correct numbers, which is bad for customer experience.

    The following devices were unable to see Credit Card numbers on their phones:
    iPhone 6 – iOS 12.4.6
    iPhone SE – iOS 11.41
    iPhone 6 iOS 12.4.6
    iPhone SE – iOS 13.1.3

    Can you help provide a coding fix for this bug on these devices?

    Thanks!

    June 18, 2020 at 3:52 am #1223567
    GeoffreyTMoore

    Following up: I got one more person on an iPhone 7 reporting that problem and they had this phone version: iPhone 7 13.5.1

    I confirmed that my friends were able to checkout despite the numbers being invisible, so it makes it difficult but not impossible. So it’s not a glitch with the actual submit process, just with not being able to see the typed/entered Credit Card numbers, which may delay or frustrate some, and for people who don’t know me and are not “testing for me,” not seeing their card numbers entered prevent them from completing the purchase. I don’t want to lose income because people cannot enter their Credit card info to buy items on my website.

    I am also checking WooCommerce support and Square support forums to see if this has happened to anyone else on WordPress.

    I appreciate your help with this request.

    Thanks!

    June 18, 2020 at 4:13 am #1223573
    Rikard

    Hi,

    Sorry for the problem. I don’t have an iphone to test with, but I tried loading your checkout page in the Chrome iphone 6/7 emulator. When adding numbers to the credit card field then they are visible, but only a few at a time. Is that the problem, or are they all invisible all the time? If you have a screenshot then that would help us understand better.

    Best regards,
    Rikard

    June 18, 2020 at 4:28 am #1223577
    GeoffreyTMoore

    The text is invisible all the time. Please see attached screenshot.

    It is also difficult to see the CVV text completely as the box is so small…

    June 19, 2020 at 4:41 am #1223931
    Rikard

    Hi,

    Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#top #payment div.payment_box {
    width: 100%;
    padding: 0;
}

.wc-square-credit-card-hosted-field-parent {
   width: 100%;
}
}

    Best regards,
    Rikard

    • This reply was modified 4 years, 6 months ago by Rikard.
    June 19, 2020 at 4:49 am #1223933
    GeoffreyTMoore

    Thanks, Iʻll try that code and do some more testing to see how it looks. Thanks, Iʻll reply when I have an update if this is resolved.

    June 19, 2020 at 10:55 am #1224015
    Rikard

    Hi,

    Thanks for the update. Just let us know if you should need any further help.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.