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 );
It’s important to note that the below code snippet will only change the sub-labels on the Stripe Credit Card field.
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 );