How to Customize the Stripe Styling

Introduction

Want to customize the Stripe styling on the elements on your forms? No problem! This tutorial will walk you through the simple steps of customizing the appearance of your Stripe Credit Card field using PHP.

By default, the field will already have default options set within WPForms.

Creating the form

We’re going to begin by creating a new form and adding our fields. You’ll need to include the Stripe Credit Card field on your form.

If you need help in creating a form that will process Stripe payments, please checkout this detailed guide.

For the purpose of this tutorial, we’ve created a simple order form.

Adding the snippet

Now it’s time to add the snippet. If you need help with how and where to add custom snippets to your site, please see this tutorial.

/**
 * Customize Stripe styling when using the Payment Element
 *
 * @link https://wpforms.com/developers/how-to-customize-the-stripe-styling/
 */

function wpf_stripe_payment_element_appearance() {
	
	return [
		'theme' => 'stripe',
		'labels' => 'floating',
		'variables' => [
			'fontFamily' => 'Sohne, system-ui, sans-serif',
			'fontWeightNormal' => '500',
			'borderRadius' => '8px',
			'colorBackground' => '#0A2540',
			'colorPrimary' => '#EFC078',
			'accessibleColorOnColorPrimary' => '#1A1B25',
			'colorText' => 'white',
			'colorTextSecondary' => 'white',
			'colorTextPlaceholder' => '#727F96',
			'tabIconColor' => 'white',
			'logoColor' => 'dark'
 	 	]
	];
}

add_filter( 'wpforms_integrations_stripe_api_payment_intents_set_element_appearance', 'wpf_stripe_payment_element_appearance' );

In this snippet, we’ve selected the Stripe theme and set the field labels to floating as well as various CSS options.

Now when we view our form, you can clearly see the changes we’ve made including the floating labels on the field.

And that’s all you need to customize the Stripe styling. Would you like to add floating labels to other form fields? Check out our tutorial on How to Create a Form With Floating Labels.