Modify the card element with CSS/JS

[Gilles]

Hi there,

I was wondering if it was possible to make some visual modifications to the card element with CSS and/or JS, in order to be able to separate the 3 fields and avoid having to use the elements separately (card, exp, cvc)

i've been trying to do so by analyzing the code inside the iframe but without success

thanks!

[Jonathan Lomas]

Hi Gilles!

Great questions!  You can split out the fields like this: https://jsfiddle.net/o2n3js2r/ and you can customize a good bit of the elements' design via CSS; you can see some examples here: https://github.com/stripe/elements-examples

Hopefully that clears things up a bit!

Best,

Jonathan

--
You received this message because you are subscribed to the Google Groups "Stripe API Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.
To post to this group, send email to api-d...@lists.stripe.com.
Visit this group at https://groups.google.com/a/lists.stripe.com/group/api-discuss/.

[Gilles]

Hi Jonathan and thank you for your answer!

I know we can create each element separately instead of using the card element but I wanted to avoid that, as I find the card element more easy and more complete. I saw that when using elements seperately I would have to remake a lot of stuff that is automatic with the card element, such as the credit card brand display and the validations.

I was hoping there was a way to "hack" a little bit the card element display in order to split it visually but not in the way it works

[Jonathan Lomas]

Hi Giles:

You're very welcome!  Unfortunately that's the only way to visually split out those elements, so if you want to have that split, that's what it'll take.  That said, here's an example that includes the card brand part, which may help a bit: https://jsfiddle.net/ywain/L96q8uj5/

Cheers,

Jonathan

[Gilles Abenhaim]

thanks a lot!

I will analyze the code thanks :)

G.