Using the new Credit Card form in WooCommerce 2.1

WooCommerce 2.1 includes a standardised credit card form which payment gateway plugins can now utilise for a consistent UI.

2013-12-14 12_45_18

Using the jQuery Payment script (built by Stripe) inputs are formatted as you type which also helps prevent user error.

This functionality is aimed at direct gateways where the credit card form is shown on the checkout – it shouldn’t be needed for any others. Here’s how to support it.

1. Declare support

In your main gateway class, you’ll first need to add the supports variable and ensure that contains default_credit_card_form. By default, supports is an array containing only ‘products’, so you can append it:

$this->supports[] = 'default_credit_card_form';

2. Modify your payment_fields method

If you don’t have a ‘payment_fields’ method you can ignore this step, but if you had a credit card form previously you most likely will.

Remove the method to let core handle the output of the form, or if you really need the method, output the form manually using:


That will output the new-style form in the payment area on the checkout.

3. Modify your form handler

Next you’ll need to ensure your gateway is looking for the correct post data, as the field names may have changed. By default, the credit card form will post the following fields:

  1. GATEWAYID-card-number
  2. GATEWAYID-card-cvc
  3. GATEWAYID-card-expiry

You’ll want to format these values as necessary, for example you may want to remove spaces and dashes from the credit card number, or reformat the expiry from the default ‘MM/YY’ format to something your gateway requires.

Need something custom?

If you need a more custom form, but still want to use our scripts and styles, you have two options:

1. Use the credit_card_form() method

credit_card_form() takes two arguments – $args and $fields.

$args only consists of fields_have_names in 2.1, so if you passed in:

$args = array( 'fields_have_names' => false )

This would result in the credit card form fields having no ‘names’ thus preventing them from being posted. This is useful for gateways like Stripe where the values are not posted, and are instead tokenised via another script.

$fields lets you pass in your own fields to change the default ones. You should look at the inline documentation for notes on the usage of this.

2. Use the filters and actions

  • woocommerce_credit_card_form_args – filters the args array letting you change fields_have_names
  • woocommerce_credit_card_form_fields – filters the default fields should you need to change them globally
  • woocommerce_credit_card_form_start – action fired before the fields are output to the credit card form
  • woocommerce_credit_card_form_end – action fired after the fields are output to the credit card form

Ship it

That wasn’t too hard now was it 🙂 Using the default credit card form should be a great time saver for gateway developers, and should ultimately improve the experience for end-users too. Win win.





5 responses to “Using the new Credit Card form in WooCommerce 2.1”

  1. Ed avatar

    Could you tell me exactly which file to put this in and a screenshot of exact placement where your code goes?


  2. Ed avatar

    Also, as far as paypal goes, can this be used for Paypal Standard or only for Paypal Pro or Advanced?

  3. Mr_H avatar

    How do I do to process the payment fields? My method is not picking them up 🙁

  4. Chris avatar

    I appreciate that you would take the time to share and resources to help people, but I feel that most people who are looking for this kind of help are really non-developers, and I know personally I would find it far more helpful to be able and find this kind of thing written for people who “don’t know wth you’re talking about” 🙂 I’m sure this same info is available in woodocs which is probably where developers go because they understand things far better than most people do… I’ve been running a active woo site for over 2 years due to all the HUGELY amazing people, like yourself, providing massive assistance through plugins, themes, and snippets of code… Having said that, I cannot determine where to even begin to accomplish this checkout form change…

    I hope you could find some time to consider versions for dummys 🙂

    Either way though, thank you!

    1. mikejolley avatar

      This is for gateway developers. End users shouldn’t go anywhere near this.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.