How to Change Sub-labels for the Credit Card Field

Introduction

Would you like to change sub-labels on your form Stripe Credit Card fields? You can change the sub-labels that appear below the fields on your form. In this tutorial, we’ll show you the basics of how you can change the sub-labels 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.

Adding the snippet to change the sub-labels

To change the sub-labels 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 sub-labels
    $properties[ 'inputs' ][ 'number' ][ 'sublabel' ][ 'value' ] = __( 'Card Number', 'text-domain' );
 
    $properties[ 'inputs' ][ 'name' ][ 'sublabel' ][ 'value' ] = __( 'Name as it appears on the card', 'text-domain' );
     
    return $properties;
}
 
add_filter( 'wpforms_field_properties_stripe-credit-card' , 'wpf_dev_creditcard_field_properties', 10, 3 );

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

Related

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', 'text-domain' );
	$properties[ 'inputs' ][ 'cvc' ][ 'sublabel' ][ 'value' ] = __( 'Security Code', 'text-domain' );
	$properties[ 'inputs' ][ 'name' ][ 'sublabel' ][ 'value' ] = __( 'Name on Card', 'text-domain' );
	$properties[ 'inputs' ][ 'month' ][ 'sublabel' ][ 'value' ] = __( 'Expiration Date', 'text-domain' );
	
	return $properties;
}

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