Additional Payment Methods have text that cannot be updated via a setting or CSS - String = #payment-method-message.StripeElement

[sverleis]

Describe the bug

When using WooPayments and additonal payment methods, such as Afterpay, there is no way to update the text that is visble on product pages, as well as the cart. These are embedded via an iframe element, thus cannot be changed via CSS.

Element: #payment-method-message.StripeElement

To Reproduce

1. Create a site with a black or dark background.
2. Enable Afterpay and Affirm in WooPayments.

Actual behavior

1. On a product page, the text is not readable for the Afterpay message.
2. On the checkout page, any CSS targeted to the iframe element is used, but only for Affirm.

Screenshots

Product page:

Checkout page:

Expected behavior

A neat element within WooPayments settings where the colour of the text can be selected, such as you can do with Express Payment options, in each having a setting for the them to be Dark, Light or Outline.

Desktop (please complete the following information):

• OS: macOS Sonoma 14.1.1
• Browser: Chrome
• Version: 121.0.6167.85

Additional context

Related ticket(s)

• 7643656-zen

[zmaglica]

This issue impacts checkout UI, so assigning to Heisenberg (based on team responsibilities Pc2DNy-3z-p2) @FangedParakeet. Assigning as part of Gamma Triage process PcreKM-yM-p2.

[pierorocca]

@elizaan36 this is a really good high priority bug issue to tackle. In addition to the reported issue of the checkout component not matching or not able to match the theme, the layout needs an overhaul to place the icons on the left or far right and so that they're appropriately sized and padded so they don't overlap.

@FangedParakeet could you provide additional insight into root cause and what's feasible? i.e. what technical options do we have, particularly ones that don't require a merchant to have to write custom css.

[pierorocca]

Also the placement of the BNPL copy relative to PayPal is interesting. Is PayPal creating that much space between the button and copy or is the theme or the WooPayments wrapper creating an issue?

[elizaan36]

+1 on prioritizing this, it's an accessibility problem. I'm curious to hear how much control we have over the BNPL payment element presented via Stripe.

[pierorocca]

@FangedParakeet, dUPE, do we have styling control per https://stripe.com/docs/elements/appearance-api or do we have known constraints?

@elizaan36 beyond accessibility, issues like this that are super visible I expect would impact merchant's buying decisions. It doesn't instill a lot of trust that the rest of the platform is reliable.

[FangedParakeet]

Spent some time today playing around with the appearance API on these checkout elements.

dUPE, do we have styling control per stripe.com/docs/elements/appearance-api or do we have known constraints?

Yes, absolutely. With the newer dUPE implementation, the payment element actually looks slightly cleaner than the GIF above in the screenshot. Here's what the newer elements should normally look like in our checkout.

Affirm, Afterpay, & Klarna payment elements with dUPE

When using WooPayments and additonal payment methods, such as Afterpay, there is no way to update the text that is visble on product pages, as well as the cart.

AFAIA, this is still true. I cannot find anything in the appearances API nor anywhere in Stripe's BNPL documentation for options to alter the text within the element's iframe. However, note that in both GIFs above (that in the description and the one I've posted here) that the text within the Affirm payment element is displayed slightly differently--appearing within a differently coloured box.

This is a Block element according to the appearances API. Previously, we had no ability to style this, but it looks like Stripe has now expanded its appearances API quite significantly. Here is the above element after applying some basic styling to the Block element to make it more consistent with other payment elements.

Check the Affirm Block element looks slightly more consistent with the rest of the checkout

The styling above was accomplished by simply reapplying some existing styling settings, but with some custom styling I can probably make it match the other inputs even closer than this. Checking the appearances API, it seems like Stripe has begun offering a lot more customisation since I have last visited that documentation: we now have the ability to style checkboxes, dropdowns, and switches among other iframe DOM elements.

While it was not previously the case, I believe we may now be able to even address some of the feedback in #5502, which had otherwise been quite an old, dormant issue.

A neat element within WooPayments settings where the colour of the text can be selected, such as you can do with Express Payment options, in each having a setting for the them to be Dark, Light or Outline.

Adding light/dark themes to our checkout elements is possible...but in the current implementation it will likely have some unintended consequences.

Stripe's appearance API does offer us several themes to apply to its elements, including a night theme. However, the appearance of our dUPE payment element currently scrapes fonts, colours, and other styles from inputs and elements present on the checkout before applying them to the payment elements. This allows the element to automatically match (or at least attempt to match) with other elements on the checkout page: if the checkout is in dark mode, the payment element will automatically apply these same styles and visa versa for the regular light mode.

If we override this automatic styling with Stripe's own fixed themes this can cause some of the colours to clash. For example, here is the same checkout with Stripe's night theme applied.

Affirm, Afterpay, & Klarna with night mode applied

Note that now since some styles are being set by the checkout whereas others are being overriden by the theme (e.g. font colour, block background, etc.) this now makes the fields less visible than usual. It would be very challenging to guess at new styles that would be able to match with Stripe's own themes and ensure that these worked consistently for every WP store theme.

We are exploring offering manual customisation options for payment element styles in #3604, so if you think that should be a higher priority, I can drag into our next sprint.

For now I am going to use this issue to ensure that all BNPL payment methods have consistent styles using the updates to the appearances API and will try to address the feedback in #5502 to greatly improve the visual appearance of these elements at checkout.

@pierorocca & @elizaan36, apologies for the delay in giving this issue my attention and for the novel above now that I have, but please let me know your thoughts and let me know if you agree with the path forward that I suggest. 🙏

[elizaan36]

@FangedParakeet Thanks for the detailed info, and much appreciate your attention to the styling consistency. I think your plan makes sense. Could you also ping @nikkivias when it's in a place for design to take a look? 🙏

[pierorocca]

@FangedParakeet I agree let's start with the BNPL improvements and then move on to overall checkout dUPE improvements and finally what customizations could we expose so that devs would have ability to fine tune the auto detection best attempt.

[pierorocca]

@nikkivias @elizaan36 on the Product page, the Stripe theme is used to display the payments method messaging and the BNPL logos. That theme provides a mint green Afterpay/Clearpay pill shaped badge.

However, on shortcode checkout we present a rectangular, white logo. Klarna and Affirm logos are consistent making them easier to find again in checkout. Afterpay is harder to find.

Suggest we switch to either the mint green pill shaped badge or the rectangular mint green logo.

On Blocks checkout, the logo is white on white on my theme and is too small to be legible. I would guess that white is the most popular theme color so this scenario will be common.

Afterpay Brand Guidelines

An alternative option is can we guess which Stripe theme, light, dark, or Stripe, is best suited to a particular site theme and then match those assets in Checkout. @FangedParakeet is that even an option?

[FangedParakeet]

An alternative option is can we guess which Stripe theme, light, dark, or Stripe, is best suited to a particular site theme and then match those assets in Checkout. @FangedParakeet is that even an option?

Beyond relying on WP dark/light mode, I think guess or calculating which Stripe theme would match a particular site would be quite challenging. There is room to offer this an optional customisation for store owners in #3604 though.

I think in the short-term switching to use the mint green pill more consistently would probably be a visual improvement. Let me know if you still agree with that, @pierorocca, and I can take care of it within this issue--it shouldn't be a particularly tough ask to include.

[pierorocca]

Let's go with the mint green badge per the brand guideline and for consistency to what is shown on the product page. The mint green will definitely stand out on both light and dark themed sites.

[elizaan36]

+1! Good catch! The mint green pill looks like the right one to use. 🙏

[FangedParakeet]

@elizaan36 & @pierorocca, this is a work in progress, as I am still deep in the midst of systematically solving all the other disturbances raised in this issue, but here is a sneak peek at what the settings and checkout pages will look like with the mint green pill, just FYI.

BNPL settings with mint green magic

Shortcode checkout with mint green mojo

Blocks checkout with mint green marvel

[pierorocca]

Great progress @FangedParakeet.

Here we can switch to the rectangular logo instead of the pill badge to keep the look and consistency.

[FangedParakeet]

I've at last got a PR ready that updates these Afterpay logos as described above. It also contains various other functional and visual fixes, but most importantly hopefully fixes illegible information on darker themes, as well as creating more visual consistency with themes in general. Allow me to provide a few visual references here.

To simulate a dark-mode theme, I used Twenty Twenty-Two with its dark Swiss style enabled. Here are a few side-by-side comparisons of the updated look and feel of the payment gateways in #8230.

Twenty Twenty-Two (Swiss)

CC

Shortcode

Looks mostly the same, nicer icons though

Blocks

Input labels now visible

giropay

Shortcode

Fonts fixed, text legible, background fixed

Blocks

Font styles fixed, background fixed, text colour matches other labels

Sofort

Shortcode

Looks mostly the same

Blocks

Text is now legible

Afterpay

Shortcode

New mint pill icon, legible text

Blocks

New mint pill icon, legible text again, consistent fonts too

I also tested my changes on two more themes: Storefront, old faithful, and Deli, which is a bit more unusual. I'll just indicate below where they have been significantly notable improvements.

Storefront

CC

Looks mostly the same.

giropay

Shortcode above, blocks below.

Fonts fixed, background fixed

Sofort

Looks mostly the same.

Afterpay

Shortcode above, blocks below.

New mint pills & fonts, font-sizes, and spacing fixed

Deli

CC

Looks mostly the same.

giropay

Fonts, spacing, and background fixed

Sofort

Looks mostly the same.

Afterpay

Fonts and spacing fixed

CC @pierorocca & @elizaan36.

[FangedParakeet]

@pierorocca & @elizaan36, I also uploaded my branch to the following test site, where you can play around with the themes I used or upload your own. Do your worst. 🙏

https://furry-crusade.jurassic.ninja demo/32PZH23d4kJMvhwlYqB9

[pierorocca]

Looking at the Afterpay gateway vs. WooPayments button render sizes:

Afterpay: 120 x 24 WooPayments Afterpay: 69 x 24

Affirm requires a minimum width of 50px for their logo. Smaller usage requires switches to the stylized A. We're rendering it at 38 x 24. I have to squint to see it which is a problem.

---

Klarna we're actually a bit bigger though our implementation deviates from the Klarna guidelines and other instances of the logo rendered by Stripe. The logo should have rounded corners. It's not a rounded as the marketing logo but rounder than our implementation.

https://docs.klarna.com/marketing/solutions/grab-and-go/ch/advertising-brand-guidelines/logos-trademarks/

[pierorocca]

Love the humor @FangedParakeet. On the Garey Busey cutout product page, the default Stripe theme doesn't work with the site's dark theme. Worth opening a separate issue. We may have to provide merchants with the option to pick which setting works best for their site or can we detect and choose the best option @FangedParakeet ?

[FangedParakeet]

Thanks for performing this icon audit on my PR, @pierorocca! I've added new icons for Affirm and Klarna and ensured that all of these logos should now be in align with suggested brand guidelines for height/width requirements.

Here's a quick preview of how these payment gateway icons should now appear.

Shortcode checkout icons

Blocks checkout icons

Payments settings icons

I've added these updates to my test site above ( https://github.com/Automattic/woocommerce-payments/issues/8094#issuecomment-1953252573 ), so feel free to return there to test them out in the wild. 🙏 I also noticed a host of other things that needed fixing along the way, which delayed this update until now.

On the Garey Busey cutout product page...

Gary just happened to be the most recent image I could find in my Pictures directory. I'm not sure how he got there, but I'm glad his toothy grin brought you some mirth!

the default Stripe theme doesn't work with the site's dark theme. Worth opening a separate issue. We may have to provide merchants with the option to pick which setting works best for their site or can we detect and choose the best option

We will be offering a filter to customise these values in #3604; however, this will not be that user-friendly to store owners, as they will have to understand how the Appearances API should be formatted and be capable of modifying this value via filter. Ideally, we could offer store owners options in our payment settings to select Stripe themes to style the payment elements or some other compact radio inputs to select styles. But this task will be a lot less trivial and may handcuff us to Stripe's implementation, which may be less desirable long-term.

Nonetheless I have created #8253 to resolve this issue for the hidden text you noticed on the payment method messaging element, as this should be a simpler fix, since we are simply not providing these computed styles to the payment messaging element right now, when it should be possible for us to do so.

[pierorocca]

Huge improvement! Well done.

I noticed during the duplicates audit that Affirm, Afterpay and other gateways are using larger sized icons on checkout without looking like they're oversized. Concerned that non WooPayments payment methods are not getting equal treatment and logo size is influencing which gateway gets uses.

Could we benchmark the logo size against Affirm, Shopify, PayPal, and Stripe to see how we stack up?

[pierorocca]

Checkout is looking so good! No more squinting.

The Afterpay logo on the merchant settings page, possible to increase the height while keeping the width constant?

[FangedParakeet]

The Afterpay logo on the merchant settings page, possible to increase the height while keeping the width constant?

Knocked up a new logo that has the same height as the other BNPL logos. Let me know if this scratches the itch, @pierorocca.

Taller Afterpay logo

[pierorocca]

Looking good. On Checkout, Affirm and Afterpay are at 24px height and Klarna is at 30px. Ideally these are all consistent. As a result the Klarna row is taller than all others. @nikkivias in the Checkout refresh were there any change to the row and logo heights that we might want to consider here?

[pierorocca]

Shortcode is at 25.88 and 30px.

[pierorocca]

Also wondering if the Payment Icon is a better choice than the Lockup style for the merchant settings. The afterpay logo shrinks into the mint in your example giving it less prominence that the flanking competitors.

Corner radius is slightly different but the proportions are closer to our standard.

[FangedParakeet]

@pierorocca, here's what that payment icon looks like in settings.

Afterpay payment icon

Also, I've recently made some rather radical improvements to how logos appear on darker themes. @brettshumaker pointed out that on dark themes, the Affirm logo blends into the background and becomes mostly invisible.

Affirm logo hiding in the shadows

If we override this automatic styling with Stripe's own fixed themes this can cause some of the colours to clash. For example, here is the same checkout with Stripe's night theme applied.

I'd mentioned above that Stripe's Appearance API themes caused conflicts with our own styles; however, I discovered yesterday that when we select the night theme, Stripe will automatically replace the payment method logos inside the payment element with logos that appear clearer on darker backgrounds.

Consequently, I've updated our implementation to dynamically detect whether the checkout has a darker tinted theme and to respectively select the regular stripe or night theme in the appropriate case. I've also added similar support to dynamically present light or dark themed logos for Affirm depending on the theme's background. Here's a sneak peek at what that will look like for Affirm now.

Dynamic Affirm light and dark logos

Using the theme dynamically would also probably fix the dilemma described in #8253. (By the way, note in the screenshot above that I also made all the logo heights more consistently sized.)

Note that when the night theme is selected, Stripe replaces the Klarna and Afterpay logos with solid white counterparts.

Solid white Klarna and Afterpay logos in night mode

@pierorocca, please let me know what you think of these dynamic theme changes and if you think it would make sense to follow suit with using the white logos for Klarna and Afterpay as well or if they're fine to stay as they are. 🙏

I'll update the test site shortly, if you'd like to play around with some of these appearance amendments on your own as well.

[pierorocca]

@FangedParakeet this is super awesome all around! Better logos. Improved styling. Autodetection to optimize Stripe theme selection. This is massively better. Well done all including @brettshumaker.

Thanks for the new merchant Afterpay logo using the payment icon. That does look much better and more balanced with the two flanking competitor logos.

[pierorocca]

Will this apply to both shortcode and blocks checkouts @FangedParakeet? I believe you had both on your site.

Favor to ask, could you please look at the night mode option for the product page implementations on shortcode and blocks? Based on one of your screen captures, I think we default to only "Stripe" theme. If so let's open an enhancement issue to treat that in the same way.

@bborman22 fyi and we'll also want to use this dynamic theme approach on the Cart enhancement.

[FangedParakeet]

Will this apply to both shortcode and blocks checkouts @FangedParakeet? I believe you had both on your site.

Yep, all the changes applied should work on both the shortcode and block checkouts, as well as both shortcode and block themes.

Favor to ask, could you please look at the night mode option for the product page implementations on shortcode and blocks? Based on one of your screen captures, I think we default to only "Stripe" theme. If so let's open an enhancement issue to treat that in the same way.

Is that basically the situation described in #8253? Right now the payment messaging elements on both shortcode and blocks product pages aren't submitting any parameters for the appearance API at all, so the default stripe theme is always in use.

8230, which contains all the amendments displayed above here, stores both the theme and the appearance parameters to sitewide transients. All we now need to do is pull these values and feed them into the the payment messaging element when we mount it to the DOM and those Stripe elements on the product pages will reap all the benefits of the visual enhancements calculated at checkout here.

I believe the same could be applied to any elements on the Cart page as well. Though, @pierorocca, let me know if I've misunderstood your concerns and there is another issue at play that is not yet captured.

[pierorocca]

Is that basically the situation described in https://github.com/Automattic/woocommerce-payments/issues/8253?

That's the one. And yes looking to replicate/reuse the work you've done, on the other pages where BNPL payment messaging is currently (product page) or where it will soon be placed (cart, additional elements on checkout). Thanks again Samir.

[pierorocca]

Adding an important comment to the record. WooPayment's historical use of squared off brand logos on checkout, while attempting to create a uniform look, it impacts brand recognizability, can violate some brand guidelines, and most importantly impacts interoperability. Looking at the Klarna examples above, specifically this example, the squared edge logo is visually inconsistent with 1) the Klarna gateway and 2) instances where Stripe controls and renders the logo in the product, cart, and checkout pages e.g. in the expanded section of the Klarna payment method and other pages that display BNPL payment method messaging.

[elizaan36]

Thanks @FangedParakeet and @pierorocca for pushing forward on these fixes with minimal design input so far. @nikkivias Could you collaborate with the team to provide updated design specs and assets for the payment icons at checkout? The varying widths of payment icons still looks noisy and distracting.

[pierorocca]

Here's some info gleaned from the respective brand guidelines as it sounds like we'll align on width rather than height?

Afterpay badge - minimum width 64px. Explicitly requires a badge on checkout.

Klarna marketing badge (non checkout pages) - minimum height 30px Klarna payment badge - No minimums specified as far as I can tell https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg Very clear that the payment badge must be used on checkout pages.

Affirm logo - minimum width 50px. Anything smaller requires the use of the brandmark. No other options available.

[pierorocca]

Looks great live @FangedParakeet.

One thing I missed is the use of the Klarna marketing badge instead of the payment badge on the mocks.

The heights and corner radius are different between the two badge types. Klarna requires used of the Payment Badge next to other payment methods. In cases where merchants have multiple duplicate gateways installed by design or by accident, there will be variations of the same brand logo stacked up next to each other. We'll pick this up in the next iteration as we rethink the layout for inclusion of BNPL messaging, which changes the equation.

Payments Badge:

Marketing Badge: