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

Figma

Additional context

pfHfG4-gT-p2#comment-211
#9331 (comment)

[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 #9483 (comment), 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 -> #9331 (comment), 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