Apple Pay button

  • Resolved koax

    (@koax)


    11 months, 3 weeks ago

    Hi guys,

    I have noticed an issue with Apple Pay Button on my website and have been navigating to other websites in this forum and saw the same issue.
    Here is some explanation :

    Here is my website screenshot : https://ibb.co/CsX3CKzd

    => as you can see, the “buy with apple” is not well displaying as the text is there but not visible (maybe something is covering it because I think I see the fill property in #FFF).

    And I check on the WooPayment settings for Apple Pay and Google Pay and here is my screenshot : https://ibb.co/V0PpBzLm The White text is not displaying in the Apple button.

    When I change the display option to be in white mode (background white, text in black), everything works well as you can see here : https://ibb.co/MxzdVry0

    Do you have any ideas on how to fix this ?
    Please note that for the moment I changed the button in order to display only Apple logo and not Apple + text.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Zee

    (@doublezed2)

    11 months, 3 weeks ago

    Hello koax,

    Thank you for contacting WooCommerce support.

    I understand the Apple Pay button on your site is not displaying correctly because both the text and background are black, making the text invisible. You mentioned that switching to white mode fixes the issue.

    Could you let me know if this was working fine before or if this is your first time setting up Apple Pay? I also recommend enabling the text in the button again so I can check what’s causing the display issue and guide you accordingly.

    Lastly, please share your site’s System Status Report with me. You can paste it into https://pastebin.com and share the link here.

    Looking forward to your response. 🙂

    Thread Starter koax

    (@koax)

    11 months, 3 weeks ago

    Hi @doublezed2 ,

    Thanks for your replay. As I exposed on my first screenshot, the text “buy with Apple Pay” (in French) is filled in #FFF, so there is something that prevents it from displaying.

    As far as I remember, it used to work fine, but I can’t say exactly when it changed. I’ve configured the button on my website with the text parameter, so you can see it now with the issue on the page I’ve posted.

    Also, please find here the pastbin of my system status report : https://pastebin.com/0tMJxNdW

    Thanks

    Moses M. (woo-hc)

    (@mosesmedh)

    11 months, 2 weeks ago

    Hi @koax,

    Thank you for your response and for the clarification. Apologies for the delay in getting back to you. We’ve been conducting some internal checks and would appreciate a bit more information from your end.

    Could you please let us know which browser you’re currently using and the type of device? For instance, are you using Chrome or Safari? And if it’s Chrome, is it on a MacBook or MacStudio?

    Thread Starter koax

    (@koax)

    11 months, 2 weeks ago

    Hi @mosesmedh ,

    I’m on MacBook Pro 2019 using Brave browser : Version 1.78.97 Chromium: 136.0.7103.93 (Build officiel) (x86_64). Also, my client colleague warned me about the issue on his iPhone 13 Pro.
    I tested on Safari and I don’t have the issue so it works well on Safari. Tried also with Firefox but can’t manage to display the button.

    Thanks

    Plugin Support Feten L. a11n

    (@fetenlakhal)

    11 months, 2 weeks ago

    Hi again!

    Thanks for letting us know.

    That’s odd, we see the issue today, although we couldn’t yesterday.

    It’s also odd that the Apple Pay button displays in Chrome, as it shouldn’t.

    I suspect that has something to do with the block you are using in this case and the theme.

    Can you please tell me which block you use for this part of the page: https://alacivette.com/invitation/#inscription?

    Could you also please let me know if it’s possible to replicate this with another theme? Have you tried that?

    Thread Starter koax

    (@koax)

    11 months, 2 weeks ago

    Hi @fetenlakhal ,

    I’m not sure what you mean by “which block you use for this part” ? As this a funnel made with Cartflows plugin and elementor, I’m not sure what you are expecting as anwser but here is a screenshot of the block : https://ibb.co/LXStG4k6

    I have just tried with Twenty Twenty-Five wordpress theme and have the same issue : https://ibb.co/nsSvrqVk.

    I will now change the button style as I can’t have this bad display any longer.

    Thanks

    • This reply was modified 11 months, 2 weeks ago by koax.
    Plugin Support Feten L. a11n

    (@fetenlakhal)

    11 months, 2 weeks ago

    Hi there!

    Thanks for sharing those details!

    We’ve tested this on a clean site using a default theme and without CartFlows or Elementor, and the Apple Pay button displays correctly. This suggests the issue is likely related to your theme, CartFlows, or Elementor—possibly a conflict or some custom styling affecting the button’s visibility.

    Using custom CSS is the best next step to resolve the display issue. Since the behavior seems to come from how the page is styled or structured, we’d also recommend reaching out to the support teams for your theme, CartFlows, or Elementor. They might be able to help pinpoint the conflict and provide a more tailored solution.

    Let us know how it goes or if we can help clarify anything else!

    Thread Starter koax

    (@koax)

    11 months, 2 weeks ago

    Hi,

    Thanks for the reply, it’s too bad you don’t have a solution for this. It’s not a blocking issue because I have an alternative solution for the user experience but it’s not the best solution.

    Thanks for your time anyway.

    Plugin Support Feten L. a11n

    (@fetenlakhal)

    11 months, 2 weeks ago

    Hi there!

    Since the issue seems to come from outside of WooCommerce Payments, we don’t have a direct fix from our end.

    I’m still glad to hear you have a workaround in place. If you ever decide to dig further into it, the theme or plugin support teams might be able to help identify a more polished solution.

    If you have a few minutes, we’d love if you could leave us a review: https://wordpress.org/support/plugin/woocommerce-payments/reviews/#new-post

    justcadr

    (@justcadr)

    10 months, 4 weeks ago

    Hi,
    have a problem displaying apple pay button in chrome browser, brave,
    when the
    https://joxi.net/5mdwjZ5c1G8oyr
    Outline style is selected.
    https://joxi.net/8AnZLyOU0OyeZA
    button’s border is not drawn,
    in safari everything is normal border is displayed at the apple pay button
    https://joxi.net/vAWg6wviKdONjA

    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    10 months, 4 weeks ago

    Hi @justcadr

    I understand that you have a somewhat similar problem.

    However, per forum best practices shown here, it is advised that you create a new thread so that we can address your issue(s) separately.

    You can create a new thread here: https://wordpress.org/support/plugin/woocommerce/#new-topic-0 and make sure to include as much information as you can.

    Thanks for understanding!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Apple Pay button’ is closed to new replies.