How to Change Sublabels for the Credit Card Field

Introduction

Would you like to change sublabels on your form Stripe Credit Card fields? You can change the sublabels that appear below the fields on your form. In this tutorial, we’ll show you the basics of how you can change the sublabels on the Stripe Credit Card field using a PHP code snippet.

In WPForms, the Stripe Credit Card field displays two different fields:

  • Card Number
  • Name on Card

Creating the form

First, you’ll need to set up a form that has a Stripe Credit Card field. If you need any help in creating a form that would accept Stripe payments, please see this documentation.

create a form that will accept Stripe credit card payments

Adding the snippet to change the sublabels

To change the sublabels you’ll need to add this snippet to your site. If you need any help in adding snippets to your site, please see this tutorial.

/**
 * Customize Stripe credit card field properties.
 *
 * @link https://wpforms.com/developers/how-to-change-sublabels-for-the-credit-card-field
 * 
 */

function wpf_dev_creditcard_field_properties( $properties, $field, $form_data ) {
	
	// Change values on Stripe Credit Card sublabels
	$properties[ 'inputs' ][ 'number' ][ 'sublabel' ][ 'value' ] = __( 'Card Number' );

	$properties[ 'inputs' ][ 'name' ][ 'sublabel' ][ 'value' ] = __( 'Name as it appears on the card' );
	
	return $properties;
}

add_filter( 'wpforms_field_properties_stripe-credit-card' , 'wpf_dev_creditcard_field_properties', 10, 3 );

It’s important to note that the below code snippet will only change the sublabels on the Stripe Credit Card field.

using this snippet you can now change sublabels on credit card fields for Stripe

And that’s it! You’ve now successfully changed the sublabels. Would you like to change the sublabels of the Name field? Take a look at our article on How to Change Sublabels for the Name Field.

Filter Reference: wpforms_field_properties

FAQ

Q: How can I use this on the old legacy credit card?

A: If you are using the WPForms Credit Card Field (Legacy), then you would use this code snippet.

function wpf_dev_field_properties_credit_card( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties[ 'inputs' ][ 'number' ][ 'sublabel' ][ 'value' ] = __( 'Credit Card Number' );
	$properties[ 'inputs' ][ 'cvc' ][ 'sublabel' ][ 'value' ] = __( 'Security Code' );
	$properties[ 'inputs' ][ 'name' ][ 'sublabel' ][ 'value' ] = __( 'Name on Card' );
	$properties[ 'inputs' ][ 'month' ][ 'sublabel' ][ 'value' ] = __( 'Expiration Date' );
	
	return $properties;
}

add_filter( 'wpforms_field_properties_credit-card' , 'wpf_dev_field_properties_credit_card', 10, 3 );