m0uka_code

[hoary grove]

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.

• m0uka_currency-settlement, 20 hours ago, 6 messages
• m0uka_api, 1 day ago, 8 messages
• m0uka_api, 1 day ago, 30 messages

[frail 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/1271530776021958749

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

[primal anchor]

Hi 👋

You cannot apply style rules of your own the Card element through your CSS.

That is because of how the Card Element is rendered inside an iframe

We expose a style parameter that allows you to specify CSS propreties directly on the object

[final frost]

hmm, why does this state otherwise? https://docs.stripe.com/js/element/the_element_container
or am I missing something here

[final frost]

forgot to add that i am infact using the style parameter too

const cardNumberOptions: StripeCardNumberElementOptions = {
    style: {
      base: {
        fontSize: '14px',
        lineHeight: '34px',
        fontWeight: '400',
        fontFamily: checkoutStyle.font_family,
        /*backgroundColor: isDarkTheme ? '#2A2A2A' : '#2A2A2A',*/
      },
    },
  }```

[primal anchor]

Okay then why don't you try applying it there?

[final frost]

because the padding field apparently works only for the idealBank element

[primal anchor]

Interesting 🤔

[primal anchor]

Okay, reviewing the example in the JS reference doc you posted. The element they are showing being styled by the

.my-input {
  padding: 10px;
  border: 1px solid #ccc;
}

rule is actually the element that wraps the Card Number Element. Taking the case of your code, the <div>.

[final frost]

correct, and if apply the padding css rule to the div, it shifts the entire iframe instead of just shifting the input text