fon_appearance-api-invalid-rules | Stripe Developers | Page 1

iron onyxBOT Jan 30, 2025, 4:53 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/1334567185741512754

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

#

steep tiger Jan 30, 2025, 4:56 PM

#

Hi 👋

Can you share the data you are attempting to pass to the appearance API? Or are you trying to apply vanilla CSS?

steep tiger Jan 30, 2025, 5:24 PM

#

The Appearance API is the only way you can modify the appearance of the Payment Element

You can modify font weight and font size. There are limits to where it won't become legible but you can still do it.

For instance I passed in

const appearance = {
    rules: {
      '.Label': {
        fontWeight: 800,
        fontSize: '5em',
        lineHeight: '22px',
        color: '#EE2211'
      }
    }
  }

and I was able to update the appearance like so

#

Now that's not really readable so something like fontSize: 1.5em would probably be better but I wanted to make sure it was responding to the rules I provided

steady prawn Jan 30, 2025, 5:27 PM

#

Yeah but I’d like to only override the font size of the floating label when focused

#

Keeping the rest of font sizes the same

#

when it animates and rests above the field

steep tiger Jan 30, 2025, 5:31 PM

#

Ok. Yes I think we don't allow changing the font size to avoid the label extending outside the visible space.

I modified my appearance object to

const appearance = {
    labels: 'floating',
    rules: {
      '.Label': {
        fontWeight: 200,
        fontSize: '1.5em',
        lineHeight: '22px',
        color: '#0c0361'
      },
      '.Label--floating': {
        color: `#db441a`,
        fontSize: '3em'
      }
    }
  }

and I don't see the label changing size when it floats, just color

#

I can file a feature request for this. I'm not sure what the concerns were for making this something you can't change.

Even if we don't allow you to modify the font size, we should at least document where we block on those rules. That way you don't spend your time trying to do something we don't allow

#fon_appearance-api-invalid-rules