woocommerce / woocommerce-gateway-stripe

The official Stripe Payment Gateway for WooCommerce
https://wordpress.org/plugins/woocommerce-gateway-stripe/
236 stars 206 forks source link

Remove / replace / stop the rotating credit card icons in the number input field #3514

Open rogercoathup opened 1 month ago

rogercoathup commented 1 month ago

Want to switch to the new checkout experience, but the display of credit card icons in the card number input field, in particular the rotating icons are a barrier to doing this.

I see previous issues that relate to this, but they appear to have diverted from the original request and been closed without providing a solution.

Can a filter be provided that allows us to remove or override those icons, e.g. allowing the simple static icon of the previous checkout experience?

Image

annemirasol commented 1 month ago

Looked into this, and Stripe does not support hiding the card brand logos for Payment Elements, at the moment: https://docs.stripe.com/sdks/stripejs-react#elements-provider

Also: https://stackoverflow.com/questions/73580930/how-can-i-hide-the-card-icons-in-stripe-payment-element

@rogercoathup Could you share with us why you want the card brand logos gone? The context may help when I file the issue with Stripe. Thank you!

rogercoathup commented 1 month ago

@annemirasol -- thanks for checking.

Couple of reasons for wanting to remove them:

  1. Doesn't match the look & feel of our checkout page (the simple grey card icon of the legacy checkout was a much better match for our design)
  2. The rotating icon is an annoying distraction -- we want customers to enter their card details, not be distracted by rotating icons
annemirasol commented 1 month ago

Filed the request to Stripe here: https://github.com/stripe/react-stripe-js/issues/537

rogercoathup commented 1 month ago

Thanks @annemirasol much appreciated