Add payment methods/gateways icon to checkout page

[frosso]

Description

There is a desire from UX to add the icons for payment methods to the checkout page.
The icon can be displayed next to the payment method's name, leveraging WooCommerce's default behavior, in order to maximize theme compatibility.

As an additional step, displaying the icon could be a preference that can be enabled on the WooCommerce Payments settings page.

Acceptance criteria

• For each gateway displayed at checkout, its corresponding icon is displayed
• Valid for both UPE and non-UPE behavior
• "Popular payment methods" gateway (which corresponds to the UPE for all payment methods) does not show an icon (there would be too many, otherwise)
• (optional) A new setting on the WC Payments settings allows to enable/disable the icon display behavior at checkout
  • The display of the icon is disabled by default for old installations, to increase compatibility
  • The display of the icon is enabled by default for new installations

Designs

Dev notes

The WC_Payment_Gateway has a $icon public member (and a get_icon() public method) that can be leveraged to display the gateway's icon on the checkout page.

Additional context

paJDYF-58k-p2#comment-13580

[harriswong]

This also needs to apply to the multiple UPE project.

[rogermattic]

Hey @frosso !
Just adding this Figma link here for the reference as it contains all the payment method icons assets we have.

[bborman22]

I just wanted to clarify something on this issue in case I'm missing some additional context coming in a bit late. This request to add icons is only relevant to multiple UPE set up correct? Since the only way to add these additional payment methods through WCPay is through UPE and the default UPE would have them all grouped under the "Popular payment methods" heading, the only way WCPay adds a row for these additional payment methods is through multiple UPE. Is that train of thought and conclusion correct?

[frosso]

@bborman22 AFAIK, the icons should be added to both the UPE payment method and to the other non-UPE payment methods.

@rogermattic @elizaan36 is this accurate?
I created this ticket as a follow up from paJDYF-58k-p2#comment-13580

[elizaan36]

hey @frosso @bborman22 👋

Yes, this would be ideal. For example, if the merchant added Afterpay and PayPal as APMs they could show up in the list with the associated icon. I don't consider it a blocker for the project but I think it would look funny if some payment methods have icons and others don't.

[bborman22]

@elizaan36 Thanks for that confirmation! I was able to get the following working on my PR #4860 with some screenshots if you wanted to take a look. That was with the Storefront theme and I'd say the only major difference is the icons are all right aligned. This was just using the built in WooCommerce payment method icon and so any theme should be compatible as there isn't anything custom going on.

[elizaan36]

Nice @bborman22 ! Right aligned is even better, I was under the impression we had to keep the icon to the right of the payment method.

[bborman22]

Great! The PR was merged into the multiple UPE branch for now, so will be getting rolled out with that feature when the time comes. I'll close this issue for now since that change has been merged into a larger move.