opensas - customize payment element | Stripe Developers | Page 1

hot sonnet Apr 5, 2022, 4:43 PM

#

Hi, the only stylistic changes that can be made to the payment element are provided through the Appearance API
https://site-admin.stripe.com/docs/stripe-js/appearance-api

Elements Appearance API

Customize the look and feel of Elements to match the design of your site.

umbral rapids Apr 5, 2022, 4:47 PM

#

Thanks a lot @hot sonnet , I've been thru the Appearence API. for my particular use case (I just need to keep the controls on the same row, like what's already being applied at the md display) can you think of any workaround? or I should just create individual elements? I wanted to use the payment element because that's what seems to be encouraged in the docs

hot sonnet Apr 5, 2022, 4:49 PM

#

You can try to apply different CSS to the created HTML elements but we don't officially support that approach and due to that we may change class names at any point.

umbral rapids Apr 5, 2022, 4:50 PM

#

ok, I get, the css class names are not part of the public api

#

I guess I'll have to insert the css using javascript. right? and I think I'll have troubles with cors
Do you know a better way to apply a different CSS to the generated HTML?

hot sonnet Apr 5, 2022, 4:55 PM

#

I mean, you could just write some static CSS that would apply only to the elements based on the currently observed class strings.

umbral rapids Apr 5, 2022, 5:14 PM

#

yes, I got that part, but the generated html is insidethe iframe from https://js.stripe.com/v3/elements-inner-payment... , so I don't know what would be the best way to apply my custom css

hot sonnet Apr 5, 2022, 5:14 PM

#

Right...true.

#

Honestly I'm not sure this can be acheived successfully. You are welcome to try it out but if you need that much fine-grained control over the individual elements you might need to use the Card Element.

umbral rapids Apr 5, 2022, 5:23 PM

#

I did a quick test and it seems I can apply and remove claess using javacript, it might break if yo change the html structure, like you said, but it might work
thanks for your help, I'll tell you how it goes later

#opensas - customize payment element