Styling Stripe Elements CC Fields

Styling the Credit Card fields in Stripe cannot be controlled with traditional CSS styles due to how these fields are loaded by Stripe. This article provides a walkthrough of the settings located in GiveWP that are responsible for controlling these fields and how to modify them.

Customize Stripe Styles

The credit card fields that display on form pages are loaded in externally by Stripe. This is a great safety feature, as Stipe can monitor the page the fields are loaded and ensure the connection is secure. If it notices the connection is not fully secure, the input fields are disabled and no text can be placed in them. This keeps your donor’s payment information safe, but does require some additional steps to properly style them.

To customize these styles, go to “Donations > Settings > Advanced > Stripe.” In the Stripe Advanced settings page there are four text fields labeled “Base Styles”, “Empty Styles”, “Invalid Styles”, and “Complete Styles”. These pertain to the different states the credit card fields can be in, and the styles associated with that state.

These fields do not accept traditional CSS rules. It must be formatted as JSON, not CSS.

Example: “font-family” vs. “fontFamily”

For the reference guide on the controllable properties and the names of these attributes for Stripe fields, visit this link to the Stripe Documentation: Stripe Styles

Stripe Styles

• Base Styles — Base styles refer to the initial state of the fields on page load before any interaction with them from your donors. These fields typically receive the most styling changes in order to fit with the styles of input fields loaded by your theme. In this field some styles are already applied and will only need to be modified.
• Empty Styles — These styles are how the field presents once the donor selects the field, the placeholder text goes away, and before the donor begins to type their information.
• Invalid Styles — The Invalid state is when the donor has typed in a value that isn’t a complete credit card number and then moves away to another text field. This styling will also immediately take effect if the donor inputs in a complete, but invalid credit card number.
• Complete Styles — When a complete and valid credit card number has been input into the field, the Complete styles take effect. This immediately signifies to the donor the card number they’ve used is acceptable, and they are free to move onto the next field.

Stripe Fonts

This setting lets you specify fonts loaded from Google Fonts, or fonts that are loaded by your WordPress theme.

You can obtain the link for the specified font from Google Fonts here: Google Fonts

For custom fonts available through your WordPress theme, select “Custom Fonts”. The specified font family will be applied to Stripe Credit Card fields including Card Number, CVC and Expiration. However, it must be formatted as JSON, not CSS.

Examples

Stripe Styles Before:

{
"color": "#32325D",
"fontWeight": 500,
"fontSize": "16px",
"fontSmoothing": "antialiased",
"::placeholder": {
"color": "#222222"
},
":-webkit-autofill": {
"color": "#e39f48"
}
}

Stripe Credit Card Fields Before:

Stripe Styles After:

Stripe Credit Card Fields After:

Stripe Styles Markup:

{
  "fontFamily": "Montserrat",
  "color": "#32325D",
  "fontWeight": 500,
  "fontSize": "16px",
  "fontSmoothing": "antialiased",
  "::placeholder": {
    "color": "#222222"
  },
  ":-webkit-autofill": {
    "color": "#e39f48"
  }
}

{
  "fontFamily": "Montserrat",
  "color": "#32325D",
  "fontWeight": 500,
  "fontSize": "16px",
  "fontSmoothing": "antialiased",
  "::placeholder": {
    "color": "#222222"
  },
  ":-webkit-autofill": {
    "color": "#e39f48"
  }
}

{
  "fontFamily": "Montserrat",
  "color": "#32325D",
  "fontWeight": 500,
  "fontSize": "16px",
  "fontSmoothing": "antialiased",
  "::placeholder": {
    "color": "#222222"
  },
  ":-webkit-autofill": {
    "color": "#e39f48"
  }
}

{
  "fontFamily": "Montserrat",
  "color": "#008000",
  "fontWeight": 500,
  "fontSize": "16px",
  "fontSmoothing": "antialiased",
  "::placeholder": {
    "color": "#008000"
  },
  ":-webkit-autofill": {
    "color": "#008000"
  }
}