Applying V2 card styles to V1 element: Card brand icons on radio button (shortcode)

[FangedParakeet]

Description

This is a follow-up issue to #9331.

Acceptance criteria

We would like to extend our V2 payment element designs to the V1 payment element. In #9475, we replaced the card logo with a generic card icon on the payment gateway radio button. This should apply the same change to the shortcode checkout as well.

Designs

Additional context

pfHfG4-gT-p2#comment-211 https://github.com/Automattic/woocommerce-payments/issues/9331#issuecomment-2346495793

[gpressutto5]

Is this issue related to the card icon only or is it also related to moving them to the left? After I followed your suggestion here the icon change took effect on the shortcode checkout too.

[FangedParakeet]

we'll also be increasing the payment method row height per Nikki's design to give more breathing room to the BNPL messaging which is very squashed on shortcode 2 and 3 column checkouts.

CC @pierorocca from https://github.com/Automattic/woocommerce-payments/pull/9483#issuecomment-2374551038, you can see the screenshot in the issue description for an example of what this should look like.

Is this issue related to the card icon only or is it also related to moving them to the left?

Yeah, we'd like all the icons moved to the left, please. Let me know if this is feasible; again, screenshot in the issue description should convey how this should appear.

[pierorocca]

Wait when did the icons shift left? Most competitive gateways are on the right. Would this not break the look for multi gateway sites which is a lot of sites?

[FangedParakeet]

Wait when did the icons shift left? Most competitive gateways are on the right. Would this not break the look for multi gateway sites which is a lot of sites?

Mm, good point. It seems that when we switched to the generic icon, when @nikkivias shared the design here -> https://github.com/Automattic/woocommerce-payments/issues/9331#issuecomment-2346495793, it appears as if the icons shifted to the left.

@pierorocca, are you able to settle the debate here: should these icons swing to the left or the right? I've found two Figma files: icons on the left and icons on the right. Let me know if you are able to guide us towards the designs that we should follow for this issue. 🙏

[pierorocca]

What's implemented for v2 @FangedParakeet? Prod and v2 designs are right oriented pfHfG4-gT-p2 if I'm not mistaked so I'd keep that for now.

[nikkivias]

Hi team, sorry for the confusion. In my last comment, I shared a past exploration with the generic card, but I didn’t clarify that it was the ONLY change I was recommending. Will be mindful of that in the future.

To confirm, use generic card icon, keep icons to the right.

[gpressutto5]

Since we won't be moving the icon to the left, is there still something to do here? @FangedParakeet @pierorocca

[pierorocca]

Yes we're waiting on Stripe to provide an attribute so we can 1) remove the logo animation from the card number field and 2) that enables us to apply the radio button logo component instead of this generic icon. It's coming soon.

[pierorocca]

Also "Test mode:" is still present and that's to be removed to try and keep the copy to two lines maximum on mobile and one line on desktop.

[pierorocca]

One more optimization related to the payment method title:

Dan has suggested "Cards" as one option. Another is "Credit / debit card". The second card is redundant imo.

[gpressutto5]

@pierorocca What about the padding for the pmme? Should we add it?

[pierorocca]

Yes I believe 70px row height was the new design to allow for more space for the PMME.

[gpressutto5]

The row height is already 70px or larger, so we can consider that done. I was asking about the left margin, to align the PMME with the method name:

[pierorocca]

Yes that makes sense and what I see in production.

[FangedParakeet]

Please add your planning poker estimate with Zenhub @gpressutto5

[pierorocca]

Note the vertical alignment. Production centered vertical alignment looks much better.

[gpressutto5]

@pierorocca The one you see in production is the blocks checkout. The screenshots I sent above are from the shortcode checkout. I will add the padding and change the vertical alignment for the shortcode checkout to look more like the blocks checkout.

[pierorocca]

On my mobile, it actually looks a lot worse. Let me get a design perspective before committing.

[pierorocca]

Checking Nikki's last v2 design, I see it all vertically aligned and the logo is also vertically aligned. In production on Blocks I see the text aligned vertically on desktop but the logo is not. Is there a limitation on how the logo can be aligned?

v2 design

v1 Production, Blocks

v1 Production, Shortcode

@elizaan36 could you help resolve the inconsistency we're seeing between design and implementation and between Blocks and Shortcode and provide guidance?

[brettshumaker]

@pierorocca What is left to tackle on this issue?

I see this comment:

we're waiting on Stripe to provide an attribute so we can 1) remove the logo animation from the card number field and 2) that enables us to apply the radio button logo component instead of this generic icon. It's coming soon.

Is this available yet? Where can I follow this request?

I also see comments about a few other styling things that don't specifically relate to the issue title. Are these being tracked elsewhere?

• vertically aligning the payment method logos (not just the card icon) in the radio button
  • This is possible to do.
• the PMME being left justified with the payment method title.
  • This seems to be already present in v1 shortcode checkout on the develop branch:
  • 

[pierorocca]

Thanks @brettshumaker.

The Stripe discussion about the animated logo removal which unlocks replacing the generic card icon with the v2 brand icons is here p1722486382714869-slack-C9976E5MJ. They have promised this year. I brought it up on Monday and Q4 was again reiterated.

PMME text left justification - that's great!

Vertical logo alignment -

1) The generic card icon should NOT be center aligned. That needs to be aligned with the radio button copy and test badge. I have another open issue to reduce the copy down to "Cards" + Test Mode badge + icons to try and keep that all on one row. The minimum viewport size width to be concerned with is 375px. Anything smaller is limited to a small set of phones/users.

2) The payment method icons, the vertical center alignment looks better on desktop . On mobile the text wrapping makes it look a bit messy but there's no other choice. If we could center align it with the appropriate spacing and on a 375px wide viewport that would be great to see please.

[pierorocca]

https://github.com/Automattic/woocommerce-payments/issues/9660

[pierorocca]

One more, the clipboard that turns into a checkmark, the color should match the text color to keep on theme and to ensure the checkmark doesn't blend in and disappear into the background.

[elizaan36]

@elizaan36 could you help resolve the inconsistency we're seeing between design and implementation and between Blocks and Shortcode and provide guidance?

hey team! Thanks for your patience while I catch up. I see that the logos are vertically centered with the PM name, which doesn't look off to me on its own.

I think the main problem is the text "4 interest-free payments..." is 2-3 text sizes too large, which is the main disparity from the design. If the text was smaller in scale to the PM name, the logo would appear less visually imbalanced. Can we bump the text on those lines down to 13px? (In the Figma file I'm seeing 13/16 scale for shortcode and 13/15 for blocks between the two lines).

Let me know if you have any other questions!

[elizaan36]

I do see in the design that the logo is vertically centered with the radio selection as well.

[pierorocca]

The vertical centering is on the way @elizaan36 :).

With bnpl and any of the payment methods, we're trying to keep to the theme styling. That includes font families, font sizes and weight, label types, colors, border radius, etc. Basically, make it look tightly integrated. With that in mind, checking that the guidance holds?

[brettshumaker]

One more, the clipboard that turns into a checkmark, the color should match the text color to keep on theme and to ensure the checkmark doesn't blend in and disappear into the background.

@pierorocca I created an issue for this #9773

[brettshumaker]

@pierorocca Here's what vertically centering these logos looks like. I have a PR so you may be able to test it out live.

Once this alignment issue is settled, are there any other fixes to handle in this issue?

[elizaan36]

With bnpl and any of the payment methods, we're trying to keep to the theme styling. That includes font families, font sizes and weight, label types, colors, border radius, etc. Basically, make it look tightly integrated. With that in mind, checking that the guidance holds?

Thanks for bringing this up. I'm seeing a similar issue in other areas of the checkout flow. The Order Meta issue that @samueljseay and an Order confirmation issue I'm discussing with @mikejolley. The problem is that the designs for the checkout flows are using two text sizes for better readability and scanning but this scale isn't being reflected in the implementation. I wonder if there's a missing text size in the type scales for checkout or shopper experience overall.

@brettshumaker @FangedParakeet @mikejolley @samueljseay Is it possible that we need a new default text-size-small on checkout blocks and default styles on block themes? Thanks for helping me understand. If there's a way to solve it I can also flag this with the team that are working on the new default theme.

[pierorocca]

@elizaan36 could it be related to font families? I've discovered a lack of awareness, on my part too, of the differences between platforms/OS's/browsers. Gaps in the font family can create all sorts of inconsistencies and head scratching as to why fonts and font sizes/spacing don't match designs or why they vary from person to person. Happy to rule that out if you can point me in the right direction? @lovo-h and I went back and forth for hours trying to figure out why WooPay button font and font sizes looked different from each other's and different from Figma.

[pierorocca]

Once this alignment issue is settled, are there any other fixes to handle in this issue?

Looks good @brettshumaker! Could you confirm if the offer text is longer or the viewport is even narrower, where does the text wrap?

[pierorocca]

FYI I lost my dev environment when I got my new laptop and haven't had a chance to have Alefe help me out to rebuild it. Otherwise I'd demo it myself. Sorry!

The generic card icon should NOT be center aligned. That needs to be aligned with the radio button copy and test badge

Confirming that this is accurate in case we don't get the v2 logos implemented in time now that Stripe has delivered on disabling the logo animation.

[brettshumaker]

FYI I lost my dev environment when I got my new laptop and haven't had a chance to have Alefe help me out to rebuild it. Otherwise I'd demo it myself. Sorry!

BotWoo lets you build a JN site with the PR if you want. You'd have to set the test site up a bit in order to get to test this, but you'd be able to play around with themes.

Could you confirm if the offer text is longer or the viewport is even narrower, where does the text wrap?

Here's what it looks like if that section is narrower on the page:

[elizaan36]

Looks like @samueljseay was able to solve the font size issue on the order meta issue.

In the PR Sam mentions:

I've matched the design spacing and font sizes as best I can (our em based font sizes are 0.3px smaller than the design).

Again, regarding the BNPL implementation I'd like to align with the designs. The current implementation where the multiple lines of text at the same font size looks quite heavy handed. Can we bump the text on the "4 interest-free payments" lines down to the size Sam is using and try to align on the text scale across all areas of checkout? Thanks for letting me know how I can support this alignment and create a cohesive experience at checkout!

[pierorocca]

The principle we've been following is to follow the theme styles as much as possible rather than imposing or breaking the merchant's brand. But it doesn't always result in the ideal outcome. It's a real challenge to deal with the variability between sites. Blocks is especially challenging given the inconsistencies which are slowly getting resolved.

I understand in the example above, Storefront?, the text is uncomfortably similar in size and weight. Totally agree @elizaan36

I believe based on the attached Storefront example below that the BNPL title is styled based on the field title styles, and the secondary BNPL text is styled based on the input field text styles. How could we compute that better so that from site to site, theme to theme, we get a better result while respecting and adapting automatically to different merchant brand representations?

Affirm has same font, weight, and size as the field labels. "4 interest free payments" has the same font, weight, and size of input field text.

[FangedParakeet]

Just FYI, there has been quite a lot of dense discussion in this issue already--the feedback and clarity is much appreciated! I've decided to break this work up into some smaller bite-sized morsels, so that all the individual acceptance criteria are clear, concentrated, and so that we can accomplish some of these tasks in parallel.

Here is the division of labour that I have deduced, but please let me know if any enhancements are missing and feel free to dive into the following issues to correct me, in case I have misrepresented any of the criteria.

• Horizontally left-aligning PMME text and vertically centre-aligning payment method icons: #9817
• Reducing PMME text font-size on gateway label: #9818
• Test instruction copy icon colour: #9773
• Payment method icons for CC gateway label: #9826

Am demoting this issue to our backlog for now, since we can track progress on the more focussed composite issues above instead. 🙏