Klarna Popup Modal using var(–colorBackground) where is that coming from?

This topic has 11 replies, 2 voices, and was last updated 2 months, 3 weeks ago by Luke Nielsen.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
April 25, 2025 at 8:00 pm #656718

jasonUk44
Participant

When I click the standard ‘Learn More’ link in the Klarna checkout the popup is unreadable as its pulling the colours from the Woodmart theme some where but I cannot locate the colours or where it’s coming from. I cannot style it externally as it’s within an iframe and the CSS wont penetrate it.

this is the CSS its using and the section thats bold ( background ) is the var(–colorBackground) its pulling from but I cant find that colour or referees anywhere..

.p-PaymentMethodMessagingModal {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-color: var(–colorBackground);
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
left: 50%;
letter-spacing: var(–letter-spacing);
max-height: 655px;
max-width: 571px;
padding: 24px;
position: absolute;
top: 50%;
width: 100%;
z-index:10

Attachments:
You must be logged in to view attached files.

April 28, 2025 at 9:32 am #656971

Luke Nielsen
Keymaster

Hello,

The theme cannot affect the CSS in the iframe. This https://prnt.sc/RkTEV8KVU2yw variable is related to the iframe – https://prnt.sc/BjLJQdpliFHp , https://prnt.sc/UCKfXBNlX7HI

So I suggest you contact the plugin support or check their documentation on how to change that color as the our theme cannot affect that area.

Kind Regards

April 28, 2025 at 2:29 pm #657052
jasonUk44
Participant
Ive logged into the site this morning and all the colours have changed. Ive now go a random set of colours in the cart and the darker popup now shows lighter text.. Ive not altered anything at all.

Please advise if you have changed anything at all as it’s now worse.
- This reply was modified 2 months, 4 weeks ago by jasonUk44.
Attachments:
You must be logged in to view attached files.
April 28, 2025 at 2:45 pm #657066

Luke Nielsen
Keymaster

Hello,

I didn’t log in to the site today. That form is situated in the iframe as well – https://prnt.sc/VXCdfoJtmR7Q

Check the article below on how to change the style of the form:

https://woocommerce.com/document/stripe/customization/style-payment-form/

Kind Regards

April 29, 2025 at 2:57 pm #657307

jasonUk44
Participant

The iframe is pulling the colours from the site.. it’s not making them up randomly.
Where is this coming from.

background-color: var(–colorBackground);

April 29, 2025 at 3:55 pm #657327

Luke Nielsen
Keymaster

It’s defined in the iframe itself – https://prnt.sc/T0kwc64SbVZM , then scroll bottom and here is that variable – https://prnt.sc/_bNLrw2fGVDk , which is in the styles of the iframe itself.

Kind Regards

April 29, 2025 at 4:00 pm #657329

jasonUk44
Participant

Is this generated dynamically and how can I target that. I have the plugin installed on other sites with the same base template and it’s a light variant.. could it be pulling that light/dark variation from somewhere in the themes setting?

April 29, 2025 at 5:12 pm #657346
Luke Nielsen
Keymaster
Hello,

Use the code below to change bg color of that popup:
```
add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
	$stripe_params['appearance'] = (object) [
		'variables' => (object) [
				'colorBackground' => 'white',
			],
	];
	return $stripe_params;
} );
```
Define it in the functions.php file in your child theme.

Kind Regards
April 29, 2025 at 10:38 pm #657378

jasonUk44
Participant

Thats fantastic. This is why people use your products time and time again… the support.
Thank-you so much for your help.

Is there a tutorial I can follow for this or did you come up with this completely bespoke?

April 30, 2025 at 11:39 am #657484

Luke Nielsen
Keymaster

Hello,

Our developer made it based on the documentation from Stripe.

Let me know if you have any additional questions.

Kind Regards

April 30, 2025 at 1:30 pm #657515

jasonUk44
Participant

Are there any other modifications I can add into this script to alter other options. Is the document they followed on the link you sent me or different…

thanks again.. really helped.

April 30, 2025 at 3:04 pm #657540

Luke Nielsen
Keymaster

Hello,

The developers used these documentations:

https://woocommerce.com/document/stripe/customization/style-payment-form/

https://docs.stripe.com/elements/appearance-api

Thank you for your time.

Kind Regards
Author

Posts