#filip-react
gloomy ivy
tired obsidian
Let me give you some examples to provide more context:
This is what I'm using as reference to get my components
It refers me to look into available options for individual elemets
so I go ahead and do that
This is what it guides me to
It shows I have a showIcon option, and so on and so fortyh
these options don't work on the react imported elements
because for example: style is actually className
They don't match
gloomy ivy
hmm. Can you share the full code you used?
tired obsidian
Also this is not the way I create an element like you see on the right of the above screenshot
This is the import
gloomy ivy
it's more like this :
const OPTIONS = {
showIcon: true,
};
return (
<div className="App">
<CardNumberElement options={OPTIONS} />
</div>
);
tired obsidian
gloomy ivy
I don't really understand what you're trying to do with that className string
tired obsidian
Right okay, that options does show the cardIcon now
gloomy ivy
to be clear, your own CSS and classes do not apply to the Element, since it's in an iframe can can't see them
you can only style it by creating an object in Javascript that looks like https://stripe.com/docs/js/appendix/style and passing that to the style option
tired obsidian
to be clear, your own CSS and classes do not apply to the Element, since it's in...
Yes you are right, it passes to element container not the element itself
gloomy ivy
there's an example on https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark&file=/src/components/demos/CardForm.js for instance
gloomy ivy
yes, but that doesn't change my answer, it doesn't do what I think you think it does
tired obsidian
What about apperance like this?
gloomy ivy
what it does(https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-classes) is that we will add certain classes to the DOM element that the Element is mounted to, so you can identify when the input is in certain states
gloomy ivy
What about apperance like this?
those are only for the PaymentElement component, the separate CardElements/CardNumberElements etc use an entirely different style system, those theming things are only for the PaymentElement
tired obsidian
Oh right okay!
Now my last question is, when the card element renders, how can I target that element to be positioned to the right?
gloomy ivy
what do you mean exactly?
gloomy ivy
were you asking someone else at Stripe this recently? I answered this internally a couple of days ago
tired obsidian
Nope 😄 That's not me ha ha
gloomy ivy
but if you're using the CardNumberElement the card icon is on the left, you can't change it
tired obsidian
Oh
gloomy ivy
it's on the right in the PaymentElement and in Checkout
tired obsidian
That's a shame, okay thats fine
gloomy ivy
just an inconsistency
tired obsidian
Thanks!
Appreciate all the help
Do you know if stripe has plans on supporting tailwind in the future?
gloomy ivy
not that I know of. Part of the issue here is the Element is an iframe, it can't see anything on your own page and needs to be configured through the Javascript bridge