How to Add Change the Styling of the Stripe Credit Card Placeholder

Overview

Would you like to change the styling of the Stripe Credit Card form field placeholder text with WPForms? Using a small PHP snippet and also custom CSS, you can easily change the style of the placeholder text.

Setup

By default, the field that you enter your credit card with is styled with some default styling.

Styling the Credit Card Number field

In order to change the styling of the placeholder text such as font-size, color, font-family, etc, we can just add a little PHP to our site.

If you need help in adding snippets to your site, please see this tutorial.

/*
 * Update placeholder text styles on Stripe Credit Card form field
 *
 * @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
 *
 */

function wpf_dev_stripe_card_field_style( $element_style ) {
	
	$element_style = [
		'base' => [
			'iconColor' => '#b95d52',
      		'fontFamily' => 'Roboto, sans-serif',
      		'fontSize' => '16px',
			'fontWeight' => '100',
			'backgroundColor' => '#f6f6f6',
			'::placeholder' => [
        		    'color' => '#b95d52',
				    'font-family' => 'Roboto, sans-serif',
				    'font-size' => '16px',
				    'font-weight' => '100',
			]
		],
	];
	
	return $element_style;
}

add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );

Now, you’ll see the styling of the Stripe Credit Card field has changed.

Styling the Name on Card field

The above snippet will only style the actual Card Number field, if you want to style the Name on Card field to match, you’ll need to add some CSS.

If you need help in adding CSS to your site, please see this tutorial.

input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #b95d52;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
    color: #b95d52;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
    color: #b95d52;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
    color: #b95d52;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

And that’s all you need! Would you like to also send metadata through to Stripe? Take a look at our article on How To Send Metadata to Stripe Payments.