Stripe.js - cannot change background color or height of credit card input

Question

I'm having an issue styling a Stripe credit card input in a Vue.js application. I'd like to change the background color to #f1f1f1 and the height to 60px, but I'm unable to do this either through the base styles or with css. What am I doing wrong? Ideally, I'd like to target it with css. Here's my code:

loadStripe() {
      card = elements.create("card", {
        style: {
          base: {
            iconColor: '#2A2A2A',
            color: '#2A2A2A',
            fontWeight: 300,
            fontFamily: 'Lato, Open Sans, Segoe UI, sans-serif',
            fontSize: '19px',
            // height: '60px',
            // background: '#f1f1f1',
            '::placeholder': {
              color: '#2A2A2A',
              fontSize: '19px',
            },
          },
        }
      });

Thank in advance!

Doesn't look like you can change those properties ~ https://stripe.com/docs/stripe-js/reference#elements-create. Have you tried CSS? — Phil, Mar 24 '19 at 02:07
Yeah I get an error in the console saying you can't change those in the base styles...I tried CSS but it hasn't worked, it seems un-targetable. I tried changing height/bg color in the dev tools and that worked but when I put it in my actual code it doesn't apply.. — Lauren Mastroni, Mar 24 '19 at 02:50
What **exactly** did you try? The good thing about CSS is that no matter how specific the existing rules are, you can always use a bigger hammer :D — Phil, Mar 24 '19 at 02:55
I don't know the elements that stripe produces so if you could locate where the `height` and `background` are set in their CSS, add those CSS selectors to your question — Phil, Mar 24 '19 at 02:57
I tried the following: .ElementsApp .InputElement { background: #F1F1F1; } — Lauren Mastroni, Mar 24 '19 at 03:42
In the dev tools, it works, but when I put it in my tags in the component it doesn't work — Lauren Mastroni, Mar 24 '19 at 03:42
Never mind I figured out a hacky solution which is to put a container around it and style that...since it has a transparent background it looks like I styled the input itself — Lauren Mastroni, Mar 24 '19 at 03:53
Feel free to add your solution as an answer below. It might help others — Phil, Mar 24 '19 at 23:41

score 4 · Answer 1 · answered Nov 13 '20 at 09:48

4

You can change the background color like below,

style: {
  base: {
    backgroundColor: 'red',
  }
}

answered Nov 13 '20 at 09:48

Hasan Sefa Ozalp

6,353
5
34
45

score 1 · Answer 2 · answered Jun 23 '21 at 13:35

According to the documentation: https://stripe.com/docs/js/appendix/style the method is "backgroundColor". But the same documentation recommends so far to make some adjustments directly to the CSS of the element container. And especially for the 'background' and 'height' for me worked better to modify directly the CSS. Working example:

<template>
   ...
   <div id="card-element"></div>
   ...
</template>
<script>
...
    let adjustments = {
      hidePostalCode: true,
      style: {
        base: {
          // backgroundColor: "#cbf5f8",
          fontWeight: "400",
          fontFamily: "Avenir, Helvetica, Arial, sans-serif",
          fontSize: "16px",
          fontSmoothing: "antialiased",
          ":-webkit-autofill": {
            color: "#fce883",
          },
        },
        invalid: {
          iconColor: "#FFC7EE",
          color: "#FFC7EE",
        },
      },
    };
    card = elements.create("card", adjustments); 
...
</script>
<style>
#card-element {
  border: 1px solid currentColor;
  border-radius: 4px;
  height: 50px;
  background: #cbf5f8;
  margin-bottom: 20px;
  padding-top: 10px;
}
</style>

score 0 · Answer 3 · answered Sep 04 '19 at 08:03

Like described in the official documentation : https://stripe.com/docs/stripe-js/reference#elements-create , there is no support to add a background color for the input element.

But you can use some hack to the parent element that you has on your HTML code to make it looks like an input and style it like you want.

Stripe.js - cannot change background color or height of credit card input

3 Answers3