l0rdandbooz_code

[safe laurel]

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

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

[hazy cove]

here's some additional context on my payment element

                <PaymentElement onChange={handlePaymentChange}/>

and then the overall Element tag wrapping both of them

<Elements stripe={stripe} options={options}>

const options = {
    clientSecret: setupIntent,
    paymentMethodCreation: 'manual',
    loader: "always",
    // mode: "billing",
    appearance: {
        labels: "floating",
        variables: {
            fontFamily: 'IBM Plex Sans, sans-serif',
            fontWeightNormal: '500',
            borderRadius: '8px',
            logoColor: 'dark',
            tabIconSelectedColor: backgroundColor
        },
        rules: {
            '.Tab--selected': {
                color: backgroundColor,
            },
        },
    }
};

[gusty talon]

What's not wroking?

[hazy cove]

the appearance on the address element isn't working

address element vs payment element

[gusty talon]

Is it about Tab--selected ?

[hazy cove]

it's incorrect heights, text is breaking, etc

Actually I just tried commenting out the custom styling and it looks like it switched the address element back to being how it would be by default

is there a good way for me to prevent certain stlyse from being applied to the address element vs the paymetn element?

[gusty talon]

No, the variables and rules are applied to both payment element and address element, there's no option to set different configuraions

[hazy cove]

makes sense. Thank you.

[hazy cove]

would I be able to separate the appearance off that elements initialization and pass separate objects to each individual stripe element?

[gusty talon]

You can. meaning you create two stripe elements, one for payment element and the other for address element

[hazy cove]

isn't that kind of a wreck as far as processing of payments and such goes?

seems like you should want to avoid that at all costs or am I wrong in my assumption

[gusty talon]

Can I suggest you to report the problem that you encountered in address element to support so that we can investigate further? Provide the relevant code, as well as a public URL to your integration.

[safe laurel]

Please click this link to open a support case with our Developer Support team, in order to help you more effectively.

Here's what to expect:

• 🧑‍💻 You may need to log in to your Stripe account first.
• ☑️ You'll be asked to confirm that you want to create a support case.
• 🔗 Your case will be routed to our Developer Support team and they will have a link to this Discord thread to preserve context on your question.
• 📩 The team will review your question and reply to your support case as soon as possible.

Why can't you answer right now?

• ⏱️ Sometimes answering technical/developer focused questions can take some time to reproduce problems or dig into edge cases or your specific account setup to get you the best possible answer, and it's not always possible to do this live in Discord.

[hazy cove]

the problem is passing the label float into my appearances object is breaking my address element. I want the label float behavior though.

[gusty talon]

Got it, open the support case so that we can follow up on it.