Stripe elements styling

How can we set stripe element styles and classes?

With stripe elements instead of putting all the elements on the page in a single iframe you can mount individual elements. It's quite easy I can send you an es6 module for it if you need (attached). This then enables you to style the inputs separately, or at all without passing the style options to the create method.

stripe.com/docs/js/elements_object/create

Also there are options in stripe elements to set css styles in the create method.

stripe.dev/elements-examples/

Is there any way to do this with your stripe plugin? Is there anywhere I can add the styles for the stripe inputs? Or is there a way to output elements individually?

I asked for this when they first added it. I hope you can pursuaded them.

Wouldn't be difficult for them to add an option in the plugin to pass a javascript (or json) object with our styles in according to the stripe docs. Then they can just check for that variable and if it isn't null then pass in the object to the stripe elements create method

Can we get some help on this? I do not like the layout of the Elements fields.

Hi,
The Stripe element styling is handled by Stripe JS ( stripe.com/docs/stripe-js ) but you can try to add custom CSS (Joom Donation -> Configuration -> Custom CSS) to change stylesheet of Stripe Card Box
Below is current stylesheet of Card box:
Thanks
Dam

Hi Dam, I have tried everything and nothing affects these fields. I am not a developer so I might not understand what to change. I am really asking for help to get this working.

All I need is some space around the fields. Besides, this CSS shows things that I don't see in the form. I see not shadows or borders. That's what is needed to make them look like fields. They are hard to distinguish right now.

Can you please help us get this a little more defined?

Thank you

There is no way to customize the elements with CSS. That is not how stripe elements work. They load the fields in a single iframe so you are unable to style the fields at all except for the Style object.

The problem is that this is using the minimum possible implementation which doesn't allow for any styling stripe.com/docs/js/elements_object/create except through the Style object stripe.com/docs/js/appendix/style

I have provided example code of how to better implement each element individually and therefore be able to wrap each element in a container and style each element completely custom stripe.com/docs/js/elements_object/create_element?type=card

The other option is to give us the ability to pass a json/js Style object parameter

That's what I had thought back in the beginning. This is why I am asking for a better implementation or some other styling.

At the very least, can we get a little space around the iframe? That should be in the control of the component.

Dam, can you help us?

Hi Dave,
At the moment, I can't afford to find a viable solution to change the structure of Stripe Elements Card. I will pay attention to search through Internet for any suitable solution.
Dam

Hi Dam, I am asking you because the non Elements method is causing issues and spammers are bypassing the form somehow. Stripe contacted me and said to fix it. The only way is to use Elemets.

This other user has given you some way to do this. I would appreciate if you would support your product and help find a solution to this.