Stripe elements style setting in css

Question

I can set styles in the style options object for stripe

var elementStyles = {
    base: {
        textAlign: 'center',
        fontWeight: 400,
        fontSize: '12px',
        color: '#333'
    }
};
          
var stripe = stripeElements.elements();

cardNumberStripeElement = stripe.create('cardNumber', {
    styles: elementStyles
});

But I want to transfer styles to css. This example does not apply my styles, only those that apply to the container

var elementClasses = {
    base: 'card-info-base'
};
var stripe = stripeElements.elements();

cardNumberStripeElement = stripe.create('cardNumber', {
    classes: elementClasses
});

in css

.card-info-base {
    text-align: center "does not work";
    font-weight: 400 "does not work";
    font-size: 12px "does not work";
    height: 100px "works"
}

How do i transfer styles to css?

Answer 1

That's a good question. Unfortunately, it's not possible to apply those styles to the card element in the way you're thinking. The reason is that the card input is embedded within an iframe and styles don't cascade from a parent window down into iframes.

When you add a class to the classes option, the class gets added to the element that you mounting the card in. For example, this is roughly what the DOM would look like once the element has mounted in your case:

<div id="card-element" class="card-info-input StripeElement--empty">
  <div class="__PrivateStripeElement">
   <iframe src="https://js.stripe.com/v3/">
      #document
      <input class="InputElement">
   </iframe>
  </div>
</div>

As you can see, any styles that are applied by card-info-input wouldn't make their way down to the actual input because its in an iframe.

This is different when you use the style option [0]. When you add a custom style using the style option that style is automatically added to the InputElement class when the card mounts. In a way, styles added through the style option are injected into the iframe by Stripe.js - this is why they work the way you expect.

TLDR;

If you want to apply styles to the input inside the iframe use the style option [0]. If you want to apply styles to card's parent element you can use the classes option [1] - this is especially useful if you want to apply different styles depending on the state of the input (focused, invalid, etc.)

[0] https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style

[1] https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-classes