priya_elements-appearance | Stripe Developers | Page 1

shy turtleBOT Mar 14, 2024, 11:42 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/1217981103995093043

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

covert oasis Mar 14, 2024, 11:43 PM

#

Hey @hot barn can you share a screenshot of what you see exactly and what is not working?

#

priya_elements-appearance

hot barn Mar 14, 2024, 11:43 PM

#

I am trying to send the color for the error messages

#

const options: StripeElementsOptions = {
mode: 'payment',
amount: 20000,
currency: 'eur',
appearance: {
theme: 'stripe',
variables: {
colorPrimary: 'var(--color-blue-dark)',
},
rules: {
'.Error': {
color: 'var(--color-coral-darker)',
fontSize: '0.75rem',
},
'.Input--invalid': {
borderColor: 'var(--color-coral-darker)',
},
},
},
payment_method_types: [
'card',
'bancontact',
'eps',
'giropay',
'ideal',
'sepa_debit',
'sofort',
'demo_pay',
],
};

#

I have it defined :root
--color-coral-darker: #b2443e;

covert oasis Mar 14, 2024, 11:46 PM

#

ack let me try for a bit

#

Okay so here's some basic code:

const options = {
  appearance: {
    theme: 'stripe',

    variables: {
      colorPrimary: '#0570de',
      colorBackground: '#aaaaaa',
    },
    rules: {
      '.Error': {
        color: '#dddddd',
      },
    }
  }
};```
That immediately changes the color of the error message for me

#

Can you confirm this works for you?

hot barn Mar 14, 2024, 11:52 PM

#

yes it does work

#

I want to use var to match the common practice

covert oasis Mar 14, 2024, 11:57 PM

#

okay I don't really get what that means

hot barn Mar 14, 2024, 11:57 PM

#

okay so instead of using #aaaaaa I want to send the var() defined in :root file

covert oasis Mar 14, 2024, 11:57 PM

#

what is "the root file"?

hot barn Mar 14, 2024, 11:58 PM

#

:root {
--color-blue-lighter: #a2cbff;
--color-blue-light: #7091f2;
}

it's global css

#

similar to how we use in normal css file is wht I am trying here.

#

.payNowButton {
width: 100%;
background: var(--color-blue-dark);
}

covert oasis Mar 14, 2024, 11:59 PM

#

hum sorry CSS is not my forte. Where did you see :root defined? it's not in the code your shared with me

hot barn Mar 15, 2024, 12:00 AM

#

:root {
--color-blue-lighter: #a2cbff;
--color-blue-light: #7091f2;
}

covert oasis Mar 15, 2024, 12:01 AM

#

Really sorry can I ask you to share exact end to end code? This wasn't in your previous message for the initialization

hot barn Mar 15, 2024, 12:03 AM

#

const options: StripeElementsOptions = {
mode: 'payment',
amount: 20000,
currency: 'eur',
appearance: {
theme: 'stripe',
variables: {
colorPrimary: var(--color-blue-dark),
},
rules: {
'.Error': {
color: var(--color-coral-darker),
fontSize: '0.75rem',
},
'.Input--invalid': {
borderColor: '$(var(--color-coral-darker))',
},
},
},
payment_method_types: [
'card',
'bancontact',
'eps',
'giropay',
'ideal',
'sepa_debit',
'sofort',
'demo_pay',
],
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);

#

I tried multiple solutions

#

using $ etc but non worked

covert oasis Mar 15, 2024, 12:05 AM

#

yeah I'm just really struggling to even understand the question in the first place. Is your ask "Can I use a global CSS fancy variable with $ in the appearance? Or is your ask "I can't style the color of the error message"?

hot barn Mar 15, 2024, 12:06 AM

#

okay so I am able to style the error message using #fffff i.e directly giving color code

#

I want to fetch the color code from global vars and send it over to elements options

#

am I making sense now?

covert oasis Mar 15, 2024, 12:07 AM

#

yes! I didn't even know this was a thing in CSS so I was struggling to help.

We can ignore the error part entirely then right? Mostly you could force for example colorPrimary to your variable and confirm it just doesn't work?
Just want to make sure I understand the question fully and then I'll chase down an answer

hot barn Mar 15, 2024, 12:09 AM

#

yep

covert oasis Mar 15, 2024, 12:09 AM

#

Can I ask you to write a really basic CSS rule with your global var and then pass it to primaryColor so I see what you want to do?

hot barn Mar 15, 2024, 12:10 AM

#

const options: StripeElementsOptions = {
mode: 'payment',
amount: 20000,
currency: 'eur',
appearance: {
theme: 'stripe',
variables: {
colorPrimary: 'var(--color-blue-dark)',
},

#

in browser it says --color-blue-dark is undefined

covert oasis Mar 15, 2024, 12:10 AM

#

ack and that var(...) works fine in your normal CSS?

#

that's the part I've never seen before

hot barn Mar 15, 2024, 12:10 AM

#

yes

#

can you add someone who might be aware of it?

covert oasis Mar 15, 2024, 12:11 AM

#

yep I'm asking internally. I'm fairly confident we don't support this as we're extremely strict with the subset of CSS rules that work but I'm asking now that I get the question!

hot barn Mar 15, 2024, 12:14 AM

#

oki

covert oasis Mar 15, 2024, 12:15 AM

#

I see https://docs.stripe.com/elements/appearance-api?platform=web#rules that mentions the var() trick you use but I think you're supposed to have defined that variable first

hot barn Mar 15, 2024, 12:18 AM

#

hmmm so it's possible that's for sure

covert oasis Mar 15, 2024, 12:18 AM

#

yeah trying to make sense of that example for now

#

okay making some progress now

#

  theme: 'stripe',
  variables: {
    colorDanger: '#FF0000',
  },
  rules: {
    '.Input': {
      border: '1px solid var(--colorDanger)',
    },
  }
},```

#

this works, this uses the variable --colorDanger from the top one

#

I don't think we support your own arbitrary global variables though, does that make sense?

#

and yeah okay one of the engineers working on the product confirmed that it's not possible to have "arbitrary variables" today unfortunately

hot barn Mar 15, 2024, 12:29 AM

#

oki

covert oasis Mar 15, 2024, 12:33 AM

#

const options = {
  clientSecret: '<?= $intent->client_secret ?>',
  appearance: {
    theme: 'stripe',
    variables: {
      colorDanger: '#FF0000',
    },
    rules: {
      '.Input': {
        border: `1px solid ${colorBorder}`,
      },
      '.Input::placeholder': {
        color: 'var(--colorDanger)',
      },
    }
  },
};```

#

This is the closest they came up with that might work for you. You can see colorBorder is a JS variable that is referenced with the ${colorBorder} and var(--colorDanger) is from the variables inside the apperance and both work

#priya_elements-appearance