#stephchl_unexpected
1 messages ยท Page 1 of 1 (latest)
๐ 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/1225575019342463026
๐ Have more to share? Add more details, code, screenshots, videos, etc. below.
Hi ๐
As far as I know, we do not allow any additional CSS rules to be applied to Connect Embedded Components beyond what is available in the Appearance API.
Do you have some examples of the discrepancy you are seeing?
Sure do! Here's some screenshots:
- Overriding the success badge and seeing the expected colours on desktop
- Those same overrides not being applied to mobile
- On mobile, clicking on a payout to see more details and seeing the right colours
Here are the settings provided from the Stripe UI:
const stripeConnectInstance = stripeConnect.initialize({
publishableKey: "PUBLISHABLE_KEY",
clientSecret: 'CLIENT_SECRET',
appearance: {
variables: {
badgeSuccessColorBackground: "#FF0000",
badgeSuccessColorBorder: "#00FF00",
badgeSuccessColorText: "#0000FF",
},
},
})
Sorry it's not clear to me what tooling you are using to view this. Are you actually loading a publicly acessible site on both desktop and mobile?
All good, it's in the stripe docs - I've noted it in the reproduction steps above. You can find that tool here https://docs.stripe.com/connect/customize-connect-embedded-components
Oh, okay
This is not available on a publicly accessible site yet as it's still in development. I only have this running locally but I was able to replicate it in your docs
Okay yes I see what you mean
I can flag this with responsible team to ensure we have stylistic parity between desktop and mobile
Awesome, thanks! Will there be a follow-up on this thread or a way for me to keep track of this issue so I can make the appropriate updates on my end once this is fixed?
I used this
appearance: {
variables: {
badgeSuccessColorBackground: "#AA00FF",
badgeSuccessColorBorder: "#000000",
},
and was quite disappointed to not see my deep purple success badge
I recommend you write in to Support here https://support.stripe.com/contact and ask about this specific issue. They will be able to find the ticket I file and keep you updated on progress
haha same here