Changing Credit Card Placeholder Color

I have just added credit card payment features to this website (you may need to place an item in your basket from the shop in order to then go to the checkout page). At the bottom

Solution 1:

If anyone else is still looking to change placeholder or any other css properties of stripe credit card elements then have a look on this jsfiddle covering this usecase.

Here is the preview of stripe card elements with customised placeholder

This is how you need to define style for card elements :

var style = {
base: {
  iconColor: '#666EE8',
  color: '#31325F',
  lineHeight: '40px',
  fontWeight: 300,
  fontFamily: 'Helvetica Neue',
  fontSize: '15px',

  '::placeholder': {
    color: '#CFD7E0',
  },
},
};

https://jsfiddle.net/2a9fjyuh/

Solution 2:

Yeah, we can customize stripe elements using CSS while creating a card or paymentRequestButton elements in JS.

React Elements for Stripe https://stripe.dev/elements-examples/

Code Samples: https://github.com/stripe/elements-examples/

Solution 3:

Enter your Wordpress Customizer and add this custom CSS code and edit it to your taste:

#stripe-card-element.StripeElement.empty {
background: #ffffff30!important;
}
#stripe-exp-element.StripeElement.empty {
background: #ffffff30!important;
}
#stripe-cvc-element.StripeElement.empty {
background: #ffffff30!important;
}

This part controls the background of the placeholder. What does it mean? The #stripe is part of an element. If you will see you have "card-element", "exp-element" and "cvc-element". Each edits a different part. One will edit the background of the credit card number element, one of the expiration date element and last of the CVC element.

The #fffff is a code of a HEX color (choose one that fits your taste here). The 30 behind the HEX color code defines opacity (you can delete it if you want your color to be solid, or just play with it from 01 to 99) - the choice is yours.

Play with your code and see what you can achieve :)