daniel_code

[obsidian valley]

👋 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/1270113558201368606

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

[toxic canyon]

variables goes within the appearance parameter https://docs.stripe.com/elements/appearance-api?platform=web#variables

  theme: 'stripe',

  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    colorText: '#30313d',
    colorDanger: '#df1b41',
    fontFamily: 'Ideal Sans, system-ui, sans-serif',
    spacingUnit: '2px',
    borderRadius: '4px',
    // See all possible variables below
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});```

[fleet nova]

Where I need to pass the apperance variable because I dont use the const elements

Oh wait I think I know

give me second

I want to edit a part of the text the underrline trext should be still black

[toxic canyon]

For the Cash app and ACH text, that is called .TabLabel https://docs.stripe.com/elements/appearance-api?platform=web#tabs

Trying to find what the text in the country dropdown is

[fleet nova]

ok, give me a second

Ok now it looks beter only onderline text left but I cont find how to dfo it

[toxic canyon]

The Link related text may be .Label though I am having trouble confirming that from the docs

Can you try that while I look further?

[fleet nova]

I already tried it and I doesnt work

[toxic canyon]

Gotcha

I will ask my colleagues on this.

Can you try RedirectText and TermsText?

[fleet nova]

Do I need tyo add "." before it?

Yes it work now only the Link ledt

[toxic canyon]

Yes

Can you try .Link? Testing myself but I don't have link in my Payment Element like that currently

[fleet nova]

No it doesnt work

[toxic canyon]

My apologies, getting this working on my side so I can reproduce

Still trying to set this up on my side. Link is not behaving. One other contender that we found is accessibleColorOnColorPrimary

[fleet nova]

accessibleColorOnColorPrimary doesnt work

[toxic canyon]

Sounds good, just got this working on my test page. Will report back when I've found the right rule

It is colorPrimary in variables

[fleet nova]

I doesnt work

Oh I made an error

now it works but now this changed

[toxic canyon]

Can you send me the text of your settings?

[fleet nova]

const options: StripeElementsOptions = useMemo(
() => ({
clientSecret: subscription?.clientSecret,
appearance: {
theme: 'flat',
variables: {
colorPrimary: 'White',
},
rules: {
'.Label': {
color: 'White',
fontWeight: 'bold',
},
'.TermsText': {
color: '#BFBFBF',
},
'.Link': {
color: 'White',
},
}
},
layout: {
type: 'tabs',
defaultCollapsed: false,
},
}),
[subscription]
)

[toxic canyon]

You can set that background color with

        backgroundColor: "pink"
      }```

I am trying to see if there is a way to color just that link text as well but that could be a workaround

Unfortunately I don't think that just that link text can be colored like this unfortunately

[fleet nova]

ok give me a sec I am trying to do it with the bacground

I need to change the icon and text color

TabLabel it works but the color on TabIcon doesnt work

It works