43

About this React component library.

How can I put border styling with input component?

<CardElement style={{
  base: {
    fontSize: '18px',
    border: '1px solid red' // it is not work.
  } 
}} />

but, seems they didn't provide custom style interface, though.

Anyone know?

Update:

following are sample code that using StripeElement class to apply custom styling.

.StripeElement {
  border: 1px solid #eee;
}

.StripeElement--invalid {
  border: 1px solid red;
}
mitsuruog
  • 1,259
  • 3
  • 12
  • 21

5 Answers5

18

Great question! As noted here, to apply padding or a border to a Stripe element you want to style the parent DOM node that contains the element, not the element itself:

https://stripe.com/docs/elements/reference#the-element-container

I'd wrap your CardElement in a div and then apply styling to that. As noted above, Elements automatically applies the StripeElement class to the parent element, as well as complete/empty/focus/invalid states.

hpar
  • 728
  • 4
  • 7
  • The link above is now a 404. The updated page is here: https://stripe.com/docs/js/element/the_element_container – Ben Barreth Nov 30 '21 at 20:44
15

The simplest solution is:

<div
  style={
    {
     border: '2px solid red'
    }
  }
>
</div>
piet.t
  • 11,718
  • 21
  • 43
  • 52
Jackkobec
  • 5,889
  • 34
  • 34
6

I was trying to add padding, and the wrapper div did not work for me. However, they added a change to react-stripe-elements to allow for a className on the card element. That worked for me:

In my css:

.card-element {
  padding: 11.4px 12px;
}

For my CardElement:

<CardElement style={style} className="card-element" />

You still have to use inline styling for the attributes that are in the element options styles: https://stripe.com/docs/stripe-js/reference#element-options

Sia
  • 8,894
  • 5
  • 31
  • 50
3

In the docs there is a reference to an options prop which you can add to the CardElement component:

const cardElementOptions = {
  style: {
    base: {
      color: "#666",
      fontSize: "20px",
    },
    invalid: {
      color: "#fa755a",
      fontSize: "20px",
    }
  }
}

return (
  <form onSubmit={handleOnSubmit}>
    <CardElement options={cardElementOptions} />
    <button type="submit">Submit</button>
  </form>
)

See also https://stripe.com/docs/js/appendix/style

zyrup
  • 691
  • 2
  • 10
  • 18
Dryden Williams
  • 1,175
  • 14
  • 22
  • Unfortunately border, and maybe other CSS properties, are not available via the options prop. – Beadle Dec 28 '22 at 19:58
0

There is an appearance api (https://stripe.com/docs/elements/appearance-api ) where you can see what CSS properties you can use on style object in options prop.

For now I have found a couple of ways of styling.

  1. Trough options prop with style object.
  2. Adding a classname to the element.
  3. If you tend to use flex you need to wrap your elements in two divs like this:

   <div style={{ display: "flex" }}>
          <div style={{ flexBasis: "100%" }}>
            <CardExpiryElement
              options={options}
              className="cardExpiryElement"
            />
          </div>
          <div style={{ flexBasis: "100%" }}>
            <CardCvcElement options={options} className="cardCvcElement" />
          </div>
        </div>
      </div>
Aleksa Mitić
  • 1
  • 2