If you need to validate credit card data in your form then there is a good free validation library published by Stripe that can be very helpful. This FAQ describes how to add it to your form and gives some examples of its use.
Note: We do not recommend accepting credit card data on a site. If you do so be very careful to make sure that the data is well protected.
This FAQ uses the freely available Stripe jQuery.payment library which you can download from GitHub here. Download the package and copy the two files jquery.payment.js and jquery.payment.min.js to a new folder on your site -
You will also need some 51 x 32px credit card icons for the most common cards you expect to take: these are available from various places on the internet if you don't lready have them. I found a good set from kristmandrup on GitHub here - they are in the credit_card_icons-master/vendor/assets/images/payment/straight/32/ folder in the package. Copy the images you need to the /components/com_chronoforms5/extras/jquery.payment/icons/ folder.
We will build a simple test form to demonstrate how this works, you can follow the same methods to add the validation to your full payment form.
Create a new form using the New button in the Forms Manager and, in the Designer tab, add three Text Box inputs and a Submit button.
Set the element names and ids to be card_number, card_expiry and card_cvc; and on the Validation tab of each element scroll down and add function names to the Custom function box validateCCNo, validateCCExpiry and validateCVCNo.
On the Setup tab drag these actions into the On Load event: Load JavaScript, Load CSS and HTML (render form); and to see the form data drag a Debugger action into the form On Submit event.
Open the Load JavaScript action and add this code in the JS Code box
jQuery(document).ready(function(jQ) {
// set up input formats
jQ('#card_number').payment('formatCardNumber');
jQ('#card_cvc').payment('formatCardCVC');
jQ('#card_expiry').payment('formatCardExpiry');
});
// add validation functions
function validateCCNo() {
var card;
card = jQuery('#card_number').val();
return jQuery.payment.validateCardNumber(card);
}
function validateCVCNo() {
var card, type, cvc;
card = jQuery('#card_number').val();
type = jQuery.payment.cardType(card);
cvc = jQuery('#card_cvc').val();
return jQuery.payment.validateCardCVC(cvc, type);
}
function validateCCExpiry() {
var cc_date;
cc_date = jQuery('#card_expiry').payment('cardExpiryVal');
return jQuery.payment.validateCardExpiry(cc_date['month'], cc_date['year']);
}
and in the JS Files box add this to load the Stripe library
<?php echo JUri::root().'components/com_chronoforms5/extras/jquery.payment/jquery.payment.js'; echo "\n"; ?>
Open the Load CSS action and add CSS like this - most of this adds the credit card icons so you may need to change the types and icon names.
input#card_number {
width : 230px !important;
}
input#card_number {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/credit-card.jpg) 180px 0px no-repeat;
}
input#card_number.visa {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/visa.png) 180px 0px no-repeat;
}
input#card_number.amex {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/amex.png) 180px 0px no-repeat;
}
input#card_number.mastercard {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/mastercard.png) 180px 0px no-repeat;
}
input#card_number.discover {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/discover.png) 180px 0px no-repeat;
}
input#card_number.jcb {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/jcb.png) 180px 0px no-repeat;
}
input#card_number.dinersclub {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/diners.png) 180px 0px no-repeat;
}
input#card_number.visaelectron {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/visa-electron.png) 180px 0px no-repeat;
}
input#card_number.maestro {
background: url(/components/com_chronoforms5/extras/jquery.payment/icons/maestro.png) 180px 0px no-repeat;
}
Save and test the form. You should find that when you enter a creditcard number the corresonding icon is shown at the right, the number is formatted in blocks of four digits and an error message shows if the number is not valid (this includes a check digit validation).
Here are some test number that you can use to debug
American Express: 3782 8224 6310 005 American Express: 3714 4963 5398 431 American Express Corporate: 3787 3449 3671 000 Australian BankCard: 5610 5910 8101 8250 Diners Club: 3056 9309 0259 04 Diners Club: 3852 0000 0232 37 Discover: 6011 1111 1111 1117 Discover: 6011 0009 9013 9424 JCB: 3530 1113 3330 0000 JCB: 3566 0020 2036 0505 MasterCard: 5555 5555 5555 4444 MasterCard: 5105105105105100 Visa: 4111 1111 1111 1111 Visa: 4012 8888 8888 1881 Visa: 4222 2222 2222 2
Similarly validations should have been added to the expiry date and CVC boxes.
