Styling of card details form in “updated checkout experience”

Hello @fredrikvestin,

Since the Stripe elements are in a <iframe> tag, there are some limitations to the styling.

We have a detailed section in the plugin’s documentation dedicated to this topic.

Let us know if you have any other questions.

Hello @babylon1999

The only thing I’ve found in the documentation seems to be aimed at the old mode, not the updated experience?

In the new way of getting the credit card form the plugin seems to have a transient that contains the styling rules for the Stripe Payment Element but there doesn’t seem to be any filter to alter the rules that end up in wc_stripe_upe_params.upeAppearance? If we could modify the rules that are sent when creating the Payment Element it would be great! That way we should also be able to set one of Stripe’s themes for some easy styling.

Hi,

May I ask, can you provide a screenshot of the changes you would like to implement? And can you please provide a link to your checkout page? That way we can take a closer look for you, thanks.

Hi,

you can try it at dev.morakniv.se, I set up a quick Woocommerce, Stripe, Storefront server.

Let’s say I’d like to change the line-height, border-radius, background-color and box-shadow of the .Input element.

Hi @fredrikvestin

Thanks for sharing the link to your site, however, this is what I can see on my end. I am asked to input credentials to access your site.

If by any chance, you could disable it temporarily while we check your issue here?

Thanks!

Id like to add myself to the thread since im having the same issue. The documentation @babylon1999 linked to is outdated and does not work for the new Stripe “updated checkout experience” like detailed here: https://stripe.com/docs/elements/appearance-api

Hi @janole

Thanks for reaching out!

I understand you are experiencing the same issue and since every site is different and you’re not the person who originally started this topic then, per the forum guidelines, would you please start your own topic?

Additionally, please include your System Status Report that you can find via WooCommerce > Status. Select Get system report and then Copy for support. Once you’ve done that, you can paste it into your reply here.

If you could also provide the fatal error logs (if any) under WooCommerce > Status > Logs.

We’ll be more than happy to help there ??</img>

Hi @xue28 ,

Sorry about the login thing, server had got stuck in protected mode. It should work now.

Hello,

Thanks for the info.

Checking from my end, it looks pretty different, it is not the same screenshot as yours.

To edit the style of an iframe element, that would need some high level of code customization. I’d recommend trying out with another theme to check if the appearance fits your needs.

Hi @ihereira ,

My screenshot was from a page with our theme, not Storefront. And this is strange because being in an iframe, the styling of the page outside of the iframe shouldn’t matter right?

So it seems that you somehow set the styling rules that you use when creating the Stripe Payments Element dynamically which for example results in different line-heights for our theme vs Storefront (line-height for .Input is 18.4px with our theme vs 25.888px with Storefront).

Why don’t you make the styling settings (including ability to pick a stripe payment element theme) filterable/adjustable so that we can style the elements in the iframe to our likings? The stripe payment element has settings for styling and you send styling options when creating the element so why not let us change those settings?

Hello,

So it seems that you somehow set the styling rules that you use when creating the Stripe Payments Element dynamically which for example results in different line-heights for our theme vs Storefront

Please note, the iframe content displayed by Stripe is not part of your site or webpage, making it difficult to apply changes onto them, this is for security reasons.

I recommend testing another theme. Or you can refer to this Stripe documentation to get more information.

I hope this points you in the right direction.

• This reply was modified 1 year, 11 months ago by Igor H.

Hi @ihereira ,

Just to clear some things up.

Your plugin uses the Stripe Payment Element for the new checkout experience right?

If so, according to the documentation you linked to, you can send along what Stripe calls rules in an appearance object to style the elements of the form. They also have something called themes in the appearance object that you can use for easy styling.

It seems like your plugin uses some rules when creating the Stripe Payment Element?

If not, it would still be possible to add this functionality so that we can make our own rules to send when creating the Payment Element? Or even choose a theme?

Hi,

Your plugin uses the Stripe Payment Element for the new checkout experience right?

Yes, you are correct.

Please note that we are unable to provide further customization for extensions, if you need more assistance with custom development tasks, we’d recommend reaching out to one of our official development partners listed on this page below.

https://woocommerce.com/customizations/

Hi,

yes I understand that you don’t do customizations and I can probably mod the code myself to send the appearance rules with it, but then I would have to fork your plugin and maintain my own plugin.

I was mainly wondering if there is a way to filter the appearance object to make styling of the Stripe Payment Element easy and independent. There doesn’t seem to be a way today but I hope you add that possibility.

I found a workaround when digging into the code of the plugin. The plugin sets the styling by cloning the input element with id #billing_first_name and then get the computed styles from this element for the .Input element in the form. So by restyling this element I can get the style of the Stripe form better but it still doesn’t solve that we want different styling for this than the styling of #billing_first_name. Remember to clear cache and the transient wc_stripe_upe_appearance for the new style to take effect in the Stripe Payment Element.

To me after getting into the code a bit more it seems that if you just add a filter hook on line 304 ($stripe_params[‘upeAppearance’] = get_transient( self::UPE_APPEARANCE_TRANSIENT );) in woocommerce-gateway-stripe-develop\includes\payment-methods\class-wc-stripe-upe-payment-gateway.php the problem would be solved as you seem to get the styling from a cloned set of elements, set a transient with those values and then get that transient when creating wc_stripe_upe_params which in turn is used to create the element?

Hello,

This is a development topic, unfortunately, not covered on our forum. I’m going to leave this thread open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

More information can be found at WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack.