ironbeard_code | Stripe Developers | Page 1

proper atlasBOT Dec 10, 2025, 2:54 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1448327084899307704

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

next surge Dec 10, 2025, 2:55 PM

#

Here's my target styling and what it currently looks like

#

I'm using getComputedStyle to grab css vars, so in my css I have

 .StripeElement {
    /* These property values are injected into Stripe's Appearance variables */
    accent-color: var(--accent);
    background-color: var(--bg);
    color: var(--fg);

    border-radius: var(--interactive-border-radius);
    border-color: var(--graphical-fg);
    border-width: var(--interactive-border-width);
    border-style: none;

    font-family: var(--main-font);
    line-height: var(--rhythm, 1rlh);
  }

#

when I log my variables object to console, it shows colorBorder: "rgb(0, 128, 128)"

vast halo Dec 10, 2025, 3:01 PM

#

Hi there! Juggling a couple of threads, looking into this now

next surge Dec 10, 2025, 3:01 PM

#

no worries 🙂

proper atlasBOT Dec 10, 2025, 3:16 PM

#

next surge Dec 10, 2025, 3:26 PM

#

Here's the variables object logged to console:

{
  "fontFamily": "\"Source Sans 3\", system-ui, sans-serif",
  "fontSizeBase": "16px",
  "labelMdFontSize": "16px",
  "labelSmFontSize": "16px",
  "fontLineHeight": "22.4px",
  "spacingUnit": "0px",
  "borderRadius": "3.2px",
  "colorBorder": "rgb(0, 128, 128)",
  "formHighlightColorBorder": "rgb(0, 128, 128)",
  "formAccentColor": "rgb(0, 128, 128)",
  "formBackgroundColor": "rgb(248, 250, 251)",
  "colorText": "rgb(18, 18, 16)",
  "colorTextSecondary": "rgb(0, 128, 128)",
  "colorBackground": "rgb(248, 250, 251)",
  "colorPrimary": "rgb(0, 128, 128)",
  "colorDanger": "light-dark(#962020, #ffc9c9)",
  "colorSuccess": "light-dark(#1b5727, #b2f2bb)",
  "colorWarning": "light-dark(#804200, #ffec99)",
  "iconColor": "rgb(0, 128, 128)"
}

and the issues I'm having are:

Label font sizes are "14.88px" not "16px"
No borders around the form inputs
I would like to reduce the padding inside the form elements (whether it's by line-height, height, etc). Not sure if spacingUnit comes into play here. Setting it to 0px doesn't show any difference, but using 2px makes things more compact, but I'd prefer to set the spacing between fields / labels and height of the inputs separately?

vale matrix Dec 10, 2025, 3:30 PM

#

Interesting, so our appearance API is changing each of those based on what you put in, but its slightly off in ways?

next surge Dec 10, 2025, 3:33 PM

#

It seems so. All of my variables are defined as light-dark(), so in order to get around that I set the CSS properties of StripeElement (and I have to include .StripeElement in DOM to start with, instead of letting Stripe.JS add it). That way I can get the computed actual values "out" of the light-dark (which Stripe doesn't support).

#

some things are working:

The font family is correct, font size is not.
form background color is correct, border color is not
focusing a form does appear to use teal (my --accent color when light theme is on). Also when focused, it does appear to have a teal border in addition to the focus ring.

#

the card icon and "Secure, fast checkout" are teal, which come from iconColor and colorTextSecondary, so those are working

next surge Dec 10, 2025, 3:57 PM

#

Does PaymentElement inherit any styles from .StripeElement?

vale matrix Dec 10, 2025, 3:59 PM

#

So for font size, the issue looks to be that you are passing "labelMdFontSize" which the appearance API isn't recognizing as a variable. When I set "fontSizeSm" which is in our docs, the small font size does change to match that. Trying to figure out how to properly set that via a label rule

#

Good question, looking in to that.

#

Do you have a public site where we can see this what you currently have here? Hard-coding the values on my side is working but sometimes it helps to see a live site as well

next surge Dec 10, 2025, 4:10 PM

#

Sorry had to run afk for a second

#

I got labelMdFontSize from a stripe doc, but it might have been for a different element?

#

Currently I'm just running this on a dev server, let me see if I can put something together using CodePen.

vale matrix Dec 10, 2025, 4:13 PM

#

Ah it looks like the initial doc that you linked to is for our connect embedded components which is a similar but separate thing. I did not realize that they were that different. The Payment Element uses the appearance API settings from this doc https://docs.stripe.com/elements/appearance-api#labels

#

For input border color you can use a rule (i set a weird pink color to be sure when it changed):

  variables: {
    fontFamily: "\"Source Sans 3\", system-ui, sans-serif",
      fontSizeBase: "16px",
      fontLineHeight: "22.4px",
      spacingUnit: '0px',
      borderRadius: "3.2px",
  },
  rules: {
    '.Input': {
        borderColor: "rgb(236, 1, 118, 1)",
    }
  }
}```

next surge Dec 10, 2025, 4:19 PM

#

Seems like there's not a borderColor? Do I need to use a Rule?

#

Can I set the padding of .Input this way too?

#

Now that I have the correct docs page, I think I can make it work. Thanks for your time 🙂

vale matrix Dec 10, 2025, 4:22 PM

#

Yes you can! This portion of the doc shows which CSS properties can be set for each class via rules

next surge Dec 10, 2025, 4:22 PM

#

btw while I have you, I think last time I talked to someone they mentioned that they'd file a ticket (or something) to add light-dark support for variables. It's baseline 2024 and would be great to have 🙂

#

but the hack I mentioned (setting css properties on .StripeElement then using .getComputedStyle) works for now

#

although, actually, it doesn't update their values each time someone toggles the theme. Does PaymentElement have a js method to refresh/update theme?

vale matrix Dec 10, 2025, 4:27 PM

#

For that you can call elements.update and pass your new appearance variables the same way

#

So if you can make that call whenever the toggle happens that should do the trick!

next surge Dec 10, 2025, 4:28 PM

#

oh, finally (I promise): fontSizeBase is scaled using rem units to get the others..can I just specify a 1 multiplier (aka don't shrink label fonts), or do I need to just set fontSizeSm to 16px too?

proper atlasBOT Dec 10, 2025, 4:46 PM

#

vale matrix Dec 10, 2025, 4:55 PM

#

I am having trouble finding info on that, consulting colleagues and will get back with what I hear

vale matrix Dec 10, 2025, 5:13 PM

#

My colleague confirmed you can do that! If you just set fontSizeSm: '1rem' and such they should all just use the base size

#ironbeard_code