Include more payment method icons on the order received page

[csmcneill]

Description

When a payment is processed via WooPayments, we don't always include the associated icon on the Order Received page.

For example, with WooPay, we include WooPay branding in the Payment Method section of the order received page. However, other payment methods, like BNPLs, we do not:

Using payment method icons can reinforce brand identity and trust for the payment methods used by the customer, and and it can create a consistent experience for merchants and customers.

We could leverage existing payment method icons that are used on the admin side of the house (e.g., in Payments > Transactions).

Acceptance criteria

• First requirement
• Second requirement
• Third requirement
• etc.

Designs

Testing instructions

1. Go to '…'
2. Click on '…'
3. Scroll down to '…'
4. Observe expected behaviour

Dev notes

Additional context

Surfaced in pbUcTB-4el-p2#using-payment-method-branding-icons-more-liberally

[htdat]

This issue impacts Additional Payment Methods, so assigning to @Automattic/heisenberg (based on team responsibilities Pc2DNy-3z-p2) cc team lead @FangedParakeet. Assigning as part of Gamma Triage process PcreKM-yM-p2.

[FangedParakeet]

Please add your planning poker estimate with Zenhub @brettshumaker

[brettshumaker]

@pierorocca Here are some screenshots of what this looks like:

---

---

cc @FangedParakeet since you've been chosen by the review randomizer

[pierorocca]

Could you comment if this meets accessibility requirements?

An alternative option if it does not is the smaller square badge plus text.

E.g. [logo] Affirm

[brettshumaker]

Could you comment if this meets accessibility requirements?

I'm not sure what all the requirements are, but I've included the payment method name in the alt tag of the image and I've tested that a screen reader reads the payment method name like "Afterpay, image"

[pierorocca]

Perfect thanks @brettshumaker. I presume it's keyboard navigable and that's how the alt tag was voiced. I think we're ok unless @nikkivias would suggest otherwise from an a11y perspective.

[nikkivias]

Sorry for only responding to this now, team.

I'm fine with adding the logo @brettshumaker @pierorocca but am seeing issues when the Order details are displayed horizontally

The gap between the label and value no longer appear the same as the items on the left. Further more the bottom values are no longer aligned. This is perhaps due to the images appearing taller? How can we ensure that they all appear equal in height, and are all visually aligned?

[brettshumaker]

Hi @nikkivias - thanks for taking a look. 😃

The gap between the label and value no longer appear the same as the items on the left.

This is likely due to the line height of the value text in this particular theme. If that line height is taller than the actual text, it'll add "extra" vertical space where our icons will fill a max of 30px height and have no "extra" space between it and the label. This theme doesn't seem to account for using images in this location.

Further more the bottom values are no longer aligned. This is perhaps due to the images appearing taller? How can we ensure that they all appear equal in height, and are all visually aligned?

It looks like all of the text values are aligned with each other - it's just the logos that aren't. There's no special vertical alignment set so all values are the default (baseline). I do have a max-height: 30px set on the icons so they'll all be the same height but different widths. This should be fine because in this specific use case they'll never be displayed together. I do see that the value text and logo are different heights but I'm not sure there's a great way to specifically target CSS changes to these elements only when they're in a horizontal configuration. The only way I could think of is having JS that tries to decipher CSS of elements on this page and then adds a class that we can target. The problem with an approach like that is that there are several ways to achieve a "horizontal" layout and the necessary adjustments to our CSS would depend on the method the theme uses (and its HTML).

I should also note that I was mainly including those particular screenshots to highlight using the correct light/dark logos on a dark background - not to showcase a horizontal layout.

[brettshumaker]

Since this is opened again, @pierorocca do you think we should also have an issue to show the credit card icon instead of text?

[pierorocca]

I didn't realize this was limited to BNPL @brettshumaker. In that case yes. Logos + Card ending in XXXX following the WooPay pattern would make sense. @nikkivias what's your guidance?

[nikkivias]

@brettshumaker Because visual alignment is more important here as compared to the Payment options block, I was thinking to use the square/icon symbol for the payment method, + the text. This will make it more accessible and we wont worry about alignment because of varying logo sizes. Thoughts?

See sample below:

[brettshumaker]

I was thinking to use the square/icon symbol for the payment method, + the text.

@nikkivias That would be fine with me. If @pierorocca is on board with that, we can create another issue to switch to using the square icons + text and to add support for all WooPayments payment methods on this screen.

We'll likely need those assets (square icons) created because I don't believe they're currently in use anywhere.

Thanks!

[pierorocca]

Would this solve for the spacing issue?

[brettshumaker]

@pierorocca The images will likely always be taller than the text so the perceived gap between the text above it will be smaller than a line with only text. Again, the dark background / horizontal display examples above are from a single theme so we can do our best to implement a solid base styling. Still, there's always the possibility of it looking sub-optimal on any given theme.

[pierorocca]

Gotcha. Would P24 and Bancontact fit on desktop in that horizontal alignment? Any issues with fit on mobile?

[brettshumaker]

@pierorocca That will all be dependent on the theme and how it's creating the horizontal alignment. We can really only plan for the default vertical layout since themes/sites have full control over this page template. Some themes won't even show this information on their custom "order received" page.

[pierorocca]

Thanks Brett. @nikkivias something to consider here since the spacing issue isn't solved, IIUC, and some of the longer payment methods plus square icon may end up being too wide depending on the theme. Needs confirmation.

[brettshumaker]

Closing this in favor of #8897 since there are new requirements.