ironbeard_code

[next prism]

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

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

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

• ironbeard_api, 4 days ago, 32 messages

[loud canopy]

Hi there, let me double check.

[daring aspen]

hey, thanks 🙂

I get errors like Error: Invalid color provided "light-dark(#1b5727, #b2f2bb)". The following formats are supported: HEX, rgb(), and hsl

[loud canopy]

Can you share the request ID? I need to see how you're passing these values?

[daring aspen]

(maybe it's because style = getComputedStyle(document.getElementById("form")) is returning strings?

hmm, I'm not sure there is a request id. I'm just trying to render the payment elements

 <script>
    window.onload = function () {
      const stripe = Stripe('pk_test_5DzGKHGwqVDSGHR1MIDTQjGC');
      const style = getComputedStyle(document.getElementById("form"));
      const options = {
      mode: 'payment',
      amount: 1099,
      currency: 'usd',
      paymentMethodCreation: 'manual',
      appearance: {
        theme: 'flat',
        variables: {
          fontFamily: style.getPropertyValue("--font-family"),
          fontLineHeight: "1rlh",
          borderRadius: style.getPropertyValue("--interactive-border-radius"),
          colorText: style.getPropertyValue("--fg"),
          colorTextSecondary: style.getPropertyValue("--accent"),
          colorBackground: style.getPropertyValue("--bg"),
          colorPrimary: style.getPropertyValue("--accent"),
          colorDanger: style.getPropertyValue("--bad-fg"),
          colorSuccess: style.getPropertyValue("--ok-fg"),
          colorWarning: style.getPropertyValue("--warn-fg"),
          iconColor: style.getPropertyValue("--accent"),
        },
      }
    };

    // Set up Stripe.js and Elements to use in checkout form
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const paymentElementOptions = { layout: 'tabs'};
    const paymentElement = elements.create('payment', paymentElementOptions);
    paymentElement.mount('#payment-element');
  }
  </script>

[loud canopy]

Was just about to request for this.

[daring aspen]

I'm trying to hook into the css vars from my stylesheet

[loud canopy]

Where are you passing light-dark(#1b5727, #b2f2bb)?

[daring aspen]

it's --ok-fg

but all of the colors are defined in my css as light-dark() functions

[loud canopy]

Gotcha. I'm looking in the code and we do limit the format to hex, hsl and rgb.

I recommend testing with just the hex value and not passing light-dark()

[daring aspen]

Yeah, I figured. light-dark() is Baseline 2024 and very helpful for theming based on <meta name=color-scheme content="light dark">. I'd love to see Stripe support it

[loud canopy]

I can submit a Feedback request for you.

[daring aspen]

thanks 🙂

[loud canopy]

Feedback submitted.