Include even more payment method icons on the order received page

[brettshumaker]

Description

In #8650 I added payment method icons for BNPL methods to the order received page in order to close #8249. Through further discussion in the comments on that issue, we want to add icons for all WooPayments payment methods on that screen. There was also a concern raised about icon/text alignment if the elements on that screen are displayed horizontally and that switching to a square icon + text for that payment method may solve the alignment issue.

Designs

cc @nikkivias if you are able to quickly mock something up to show the intent.

Additional Context

See #8249 for the full discussion. cc @pierorocca

[nikkivias]

Okay I will look into this this week

[FangedParakeet]

@pierorocca, just checking in to see whether we are awaiting any more design input on this issue or can we proceed with what @brettshumaker suggested in https://github.com/Automattic/woocommerce-payments/issues/8249#issuecomment-2139567573? 🤔

[pierorocca]

@FangedParakeet not sure square icons makes sense since we'd have to change others in place for consistency and they're pretty small and not as recognizable against a full page of content. If anything "Card ending in" could be replaced with a pseudo mask to overcome wrapping, and to simplify things and eliminate translation.

Chase uses "...1234". Amex uses "-1234". My bank uses "-1234" to mask my checking account number. Another one of my banks uses "***1234"

[Visa logo] ***1234 [Visa logo] ...1234 [Visa logo] -1234

I like the *** option best followed by "...". What's your perspective?

[pierorocca]

For the alignment issue between logo and text, could you visualize what that would look like for me?

[pierorocca]

OK I see what Nikki was referring to. Honestly it's a nitpick and the Affirm logo being mainly text makes it feel problematic. Would making the logo smaller create more space to make the gap difference less noticeable? Other ideas?

[FangedParakeet]

Cheers for the feedback, @pierorocca. We are going to repurpose this issue to focus on implementing icons specifically for credit/debit card bands, based upon the guidance above in https://github.com/Automattic/woocommerce-payments/issues/8897#issuecomment-2448663965.

I have created #9682 and #9683 to add related icons for LPMs and EPMs respectively.

[pierorocca]

OK. On another ticket I recommended the ... masking option as it was the shortest and a subjective choice.

[mdmoore]

@pierorocca @FangedParakeet Here are some views of each card brand icon on the order received page. It's currently using **** for masking, per Pieros preference mention in https://github.com/Automattic/woocommerce-payments/issues/8897#issuecomment-2448663965. That's easily changed if need though.

I initially thought we might need some light/dark mode icons, but I think we're in pretty good shape. The only potential issue I see is with the brands on white backgrounds (Visa, Mastercard, Diners Club, JCB), but this could be easily remedied with a thin light gray border, similar to the brand icons within the credit card form which has a white background.

Let me know how we're feeling on icon size and the asterisk masking.

Visa

Mastercard

Amex

Discover

JCB

Diners

Unionpay

[pierorocca]

@mdmoore looking good-ish. The icons look oversized compared to the BNPL icons which were too tall to vertically align with the text on the same row. Let's double check the sizing please.

Also on WooPay the masking character is a bullet instead of an asterisk and 3 instead of 4. When I looked at a bunch of examples from Amex, Google, Chase, and a bunch of banks all used either 3 mask characters or a single hyphen. I'd like to stick to those norms. 3 is a bit more space efficient and "..." is the universal representation of omitted text.

[pierorocca]

And the ••• 4242 text should be vertically aligned with the rest of the text on the row.

[mdmoore]

I agree those icons were too big. That was the default styling. This is what they look like when applying the same height as BNPL icons, along with the vertically centered bullets. It's a huge improvement IMO.

[pierorocca]

Much better thank you! Entertaining the design feedback from a while ago about how the Payment Method section spacing not aligning with the other sections,what if the icon was the same height as the text? Does it get too small? The only other option I see that keeps the icon at a legible size is to shift all of the text down a bit so the entire row is centered...but that seems like overreach and messing with theme styling.

[mdmoore]

shift all of the text down a bit so the entire row is centered...but that seems like overreach and messing with theme styling.

This crossed my mind as well, but I quickly came to the conclusion. Line height is often consistent across text elements on a page. For example, Twenty-Twenty Four sets line height on the body and inherits that for all elements on the page. Increasing the line height to shift down the text in these rows could/would likely counter design choices made themes. Also, not every theme will display this summary in a row. Some will stack it, so alignment wouldn't be an issue and we would be needlessly pushing down the text below each header.

Here's an example of the icon set to match the size of the text. It feels a bit small to me but it does fix the centering issue.

[pierorocca]

Thanks @mdmoore. I don't know if Github has scaled up the size of the image, it doesn't look too bad me. Yes it's not as large and as clear as the previous size. It's also not so small to be illegible or unrecognizable. If it looks ok on mobile, I think this iteration makes sense to start with and see if we get any complaints. Will be a fairly easy change to make at this point if we needed to quickly iterate?