1. Documentation /
  2. Stripe WooCommerce Extension /
  3. Customizing the Stripe WooCommerce Extension /
  4. How can I change the style of the payment form?

How can I change the style of the payment form?

Customizing the payment forms used in the Stripe WooCommerce Extension is a bit different than styling other elements of your site. This is because the payment form is served in an iframe method on your site — which means that the payment form is actually hosted on a different site hosted by Stripe and it’s embedded on your site.

Using custom CSS

↑ Back to top

The contents of the iframe will try to mirror the styling of your site as best as possible. However, because of how the payment forms are rendered, targeting them specifically via CSS won’t work as expected.

You can still use CSS, but you will need to target the wrapping div element to style the following properties of the payment fields:

  • Background color
  • Margin
  • Padding
  • Size

Example CSS

↑ Back to top
/* Target the Credit Card */
#stripe-card-element {
    background: #ffffff !important;
    padding: 10px 5px !important;
    margin: 5px 0px !important;
}

/* Target the Expiry Date */
#stripe-exp-element {
    background: #ffffff !important;
    padding: 10px 5px !important;
}

/* Target the CVC Code */
.woocommerce-checkout-review-order #stripe-cvc-element {
    background: #ffffff !important;
    margin: 5px 0px !important;
    padding: 10px 5px !important;
}

Styling all fields simultaneously via CSS

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

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

NOTE: If you have the separate credit card form option disabled in your payments and transactions settings, all credit card fields will be displayed together as a single field on your site’s checkout page. As a result, you only need to use the .wc-stripe-elements-field selector to target the wrapper of that field.

Styling an individual field via CSS

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

FieldSelector
Card Number#stripe-card-element
Expiry Date#stripe-exp-element
Card Code#stripe-cvc-element

Example:

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

Using PHP filters

↑ 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 will need to provide the necessary styling via PHP. This can be done using the wc_stripe_elements_styling PHP filter.

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

Example filter

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.

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.

Array format

↑ Back to top

To see a description of the expected array, you can review the Stripe documentation here., but the expected array needs to have the following options:

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

A state is a object that is used to contain information about the component. The following states can be used in the aforementioned array:

StateDescription
baseBase style, all other variants inherit from this style
completeApplied when the Element has valid input
emptyApplied when the Element has no customer input
invalidApplied when the element contains invalid values

Allowed properties

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

Pseudo-classes

  • :disabled
  • :focus
  • hover
  • ::-ms-clear
  • ::placeholder
  • ::selection
  • :-webkit-autofill