Increase WooPay button label font so that it has equal prominence to competing PRBs

[pierorocca]

Description

Competing PRB buttons have label text that significantly larger the WooPay text, create visual inequality. In order to provide equal treatment, the WooPay label text size will be increased for all button sizes.

Acceptance criteria

Small button - The label text is 16px across all breakpoints
Default button - The label text is 18px across all breakpoints
Large button - The label text is 20px across all breakpoints

Designs

@nikkivias for further details as needed.
https://developer.woo.com/docs/user-experience-guidelines-payment-button-size-and-anatomy/ for reference.

Additional reference: Figma

Testing instructions

1. Enable Apple Pay/Google Pay and WooPay
2. Set button label to "Buy with" and enabled on all pages.
3. Test on Chrome and Safari desktop and note that the font size has been increased on the product, cart, and checkout pages.
4. Vary the browser window size to test various breakpoints
5. Test again on mobile
6. Test again with the other 2 label options.
7. Test again with the 'icon only' option and observe no label text and that the logo is centered.

[zmaglica]

@pierorocca Does this issue have everything it needs to be ready for someone to work on? I see that there is a draft notice at the beginning of the issue, and that's the reason why I am asking this.

[pierorocca]

It's not ready, and is pending design guidance. The current behavior is not what design expected so Nikki is taking another look. Likely will have a set of revised font sizes for each button size.

[zmaglica]

Thank you for the feedback @pierorocca . I can move this issue to the Shopper Experience team, or do you think that there is a another team that could work on this issue?

[pierorocca]

Assigned it to myself. Thanks @zmaglica.

[zmaglica]

Great. Thank you for the feedback. Moving this to the Other Teams Queue as part of Gamma Triage process.

[nikkivias]

I've updated the issue with the correct text sizes and added an additional Figma reference

[LCmry]

Hi @nikkivias , in the Figma reference the button height and the logo height are the same. I'm confused how this is supposed to work because if they are the same then you get something like this:

Is that the intention or am I missing something on the design?

[pierorocca]

@LCmry that does look like a typo. What were the values prior because the only thing that needed updatig relative to the existing implementation were the font sizes.

[LCmry]

@pierorocca Button height for default (small) is 40px, 'medium' is 48px while the logo is 27px, for large it's button 56px and logo 32px.

Also, in this issue and the design say "small, default, large" but I think the small is default and it's really more like "default, medium, large" unless we want to change that.

[pierorocca]

Medium is definitely the current default. Originally 40px was the default for a new merchant and it was deemed too small relative to the size of most theme's Cart and Checkout buttons. 48px size became the new default.

@LCmry I'd keep those logo sizes as is at 27px and 32px. Only the font sizes were part of the problem we were trying to resolve.

[rafaelzaleski]

I noticed that in ECE, the GPay button uses an image for its text. Should we consider this approach as well?
Using an SVG would protect the button’s appearance from being changed by external CSS from extensions/themes. Additionally, it would allow for adjustments to the button size while maintaining its proportions. 🤔

https://www.gstatic.com/instantbuy/svg/light/donate/en.svg

#8951

[pierorocca]

I noticed that as well. Even the last 4 digits is an SVG. @rafaelzaleski this is a really good idea and would allow the text to scale proportionally with the button size. It eliminates the need to define the text size for each height value. @nikkivias what are your thoughts on this approach?

[nikkivias]

@pierorocca @rafaelzaleski I don't have strong objections to the 'How' approach :) It seems that using SVGs for text is a standard practice across various websites. If Google follows this method, I think we should consider adopting it as well.

[bborman22]

Just dropping the results of a discussion with @rafaelzaleski on this. We think the ideal solution is to replace the text with and SVG as mentioned above. Then scaling either the button or the text container in the button as needed. We can provide the dark / light theming through CSS applied to the SVG. We should be able to get the SVGs from Sigma, but noting we'll need all four (logo, Buy with, Donate with, Book with) and we need to confirm that these are available in Figma or ask for those assets.

[pierorocca]

@bborman22 I like the idea. I had an aha moment in the shower, what about localization? With an SVG we'd need assets for each language?

[pierorocca]

For example

[pierorocca]

@alexflorisca translation comes to mind as something that impacts the button width if you haven't considered this in your effort.

[bborman22]

@pierorocca This is a great call out I hadn't considered. Given our time constraint (we'd like to get this addressed within the next week) and some scaling concerns (scaling in this sense of effort per locale). With those two considerations would a mixed approach make the most sense with the logo in SVG and the text just as text and still scale both to their container? cc @rafaelzaleski

Alternatively, @pierorocca should this get bumped to explore a full SVG approach?

[pierorocca]

@bborman22 for now let's keep the existing mixed SVG and text approach in order to not increase scope and complicate localization.

[rafaelzaleski]

There’s a <text> element in SVG, but I’m unsure if it would undermine the purpose of using SVG since we might need to load fonts, similar to what we do with CSS.

It'd be more effective to dynamically generate this button on the WooPay server, handling fonts, caching, translations, etc., internally, and then simply provide merchants with the SVG link, similar to how GPay operates. 🤔

[pierorocca]

Totally agree @rafaelzaleski. Could we outline that as an enhancement idea for a future optimization and brand protection measure? With a simple font size change right now we can get this out the door asap. This issue has been open since Feb.