Stripe: Styling credit card fields

The Stripe payment gateway for WooCommerce uses Stripe Elements to display credit card fields on your checkout page. This gives you the flexibility to customize your checkout experience by styling the credit card fields according to your theme and preferences.

All fields are displayed within <iframe> elements to provide a secure experience for customers. Because the content of iframes is technically not a part of your page, it’s not possible to directly apply styles to those components from your style sheet and must be done another way.

Note: The styling details outlined on this page are only available when the new checkout experience is disabled.

Pure CSS

↑ Back to top

Stripe Elements have as little styling as possible.

Out of the box, fields only display text and nothing more. That means all other styling is immediately accessible through CSS, including background colors, borders, padding, shadows, etc.

Standard layout

↑ Back to top

In normal mode, you will have three separate fields for each detail of the credit card.

Styling all fields simultaneously

You can use the .wc-stripe-elements-field selector to target all of those fields simultaneously. Example:

.wc-stripe-elements-field {
    border-color: #999;
}

Styling an individual field

If you need to apply styles to an individual field, you can use its identifier:

Field	Selector
Card Number	`#stripe-card-element`
Expiry Date	`#stripe-exp-element`
Card Code	`#stripe-cvc-element`

Example:

#stripe-card-element {
    margin-bottom: 1em;
}

Inline credit card form

↑ Back to top

If you enabled Inline Credit Card Form in Stripe settings, all credit card fields will be displayed together as a single field on your page. In this case, you only need to use .wc-stripe-elements-field selector to target the wrapper of that field.

Using a filter

↑ Back to top

The CSS selectors above allow you to modify the style of field wrappers. However, if you need to also change something within the actual input, you need to provide the necessary styles to Stripe.

This can be done using the wc_stripe_elements_styling PHP filter.

Example:

<?php
function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'iconColor'     => '#666EE8',
            'color'         => '#31325F',
            'fontSize'      => '15px',
            '::placeholder' => array(
                'color' => '#CFD7E0',
            ),
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

Keep in mind:

Styles you see in the example are default styles used by the extension.
As soon as you provide custom styles, the extension will ignore its default ones. To avoid this, copy the example and build on it.
All styles are applied through JavaScript, so you need to use JavaScript property names instead of pure CSS. For example, instead of font-size you should use fontSize.

To see a description of the expected array, go to: Stripe – Element Options. As explained on that page, you need to have the following options.

Format

↑ Back to top

array(
    [state] => array(
        [property] => [value],
        [pseudoClass] => array(
            [property] => [value],
        ),
    ),
)

All custom styles need to be within a nested array, containing:

State as top-level item
Properties and their values as second level items
Pseudo-classes for a specific state as second level items, and their properties as third-level ones

States

↑ Back to top

State	Description
`base`	Base style, all other variants inherit from this style
`complete`	Applied when the Element has valid input
`empty`	Applied when the Element has no customer input
`invalid`	Applied when the element contains invalid values

Allowed properties

↑ Back to top

color, fontFamily, fontSize, fontSmoothing, fontStyle, fontVariant, fontWeight, iconColor, lineHeight, letterSpacing, textAlign, textDecoration, textShadow, and textTransform

Pseudo-classes

↑ Back to top

hover, :focus, ::placeholder, ::selection, :-webkit-autofill, :disabled, and ::-ms-clear

Example

function my_theme_modify_stripe_fields_styles( $styles ) {
    return array(
        'base' => array(
            'color' => '#666666',
            'fontSize' => '15px',
            '::placeholder' => array(
                'color' => '#999999',
            ),
        ),
        'invalid' => array(
            'color' => '#ff7500',
        ),
    );
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

This example changes:

Text color and font size in all states.
Text color of placeholders in normal state through the ::placeholder pseudo-class.
Text color of fields when they are invalid.