Stripe styles

Hi @owenwatson

I hope you are doing well.

It seems the styles are loading under HTTP which the browser will block:

https://monosnap.com/file/JQkCxBdpe5ya08hOy8hgCCUMvU9J8S

Can you please double check if you have the WordPress > Settings configured to HTTPS or test using a plugin like https://ww.wp.xz.cn/plugins/really-simple-ssl/ and check if the issue is gone?

Let us know the result you got.
Best Regards
Patrick Freitas

Hi @owenwatson

You don’t really need to look for stripe.js and you can’t also directly customize/modify it.

The point here is that the stripe field is not directly rendered by Forminator but included in an iframe (so, pretty much, embedded to the page) directly from Stripe. Stripe adds its own classes to the elements that it uses.

On the very same “Styling” page (in Forminator) for the Stripe field where you found aforementioned link, you can also see there six class names. By default they are

StripeElement
StripeElement-complete
StripeElement-empty
StripeElement-focus
StripeElement-invalid
StripeElement--webkint-autofill

In this “styling” setting you can change these class names but that’s it. It can be useful if you want to maintain some sort of “naming consistency” in your own CSS or if your theme already includes some styling for Stripe.

To style Stripe field you would need to apply CSS to these classes. This is the “stripe’s way” to allow you customize style of the elements they render on their end.

For example, if you add this CSS to “Custom CSS” of your form

.StripeElement {
  background:#000;
  border:3px solid #FF9900;
}

it will set Stripe field background to black and add 3px wide orange(ish) border to it. It’s just an example but it would give you an idea how to access styling of this field, though not everything may be possible to style.

Kind regards,
Adam