WooCommerce 2.1 includes a standardised credit card form which payment gateway plugins can now utilise for a consistent UI.
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:
$this->credit_card_form();
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:
GATEWAYID-card-number
GATEWAYID-card-cvc
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 changefields_have_names
woocommerce_credit_card_form_fields
– filters the default fields should you need to change them globallywoocommerce_credit_card_form_start
– action fired before the fields are output to the credit card formwoocommerce_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.
Comments
5 responses to “Using the new Credit Card form in WooCommerce 2.1”
Could you tell me exactly which file to put this in and a screenshot of exact placement where your code goes?
Thanks!
Also, as far as paypal goes, can this be used for Paypal Standard or only for Paypal Pro or Advanced?
How do I do to process the payment fields? My method is not picking them up 🙁
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!
This is for gateway developers. End users shouldn’t go anywhere near this.