Checkout does not work with Credit Card payment method in Magento 1.4.1.0

The Magento team has changed the way credit card numbers are validated in Magento version 1.4.1.0. The new method requires an additional JS include in your page.xml.

<action  method="addJs"><script>lib/ccard.js</script></action>

The new file is located at /js/lib/ccard.js. The contents are pretty simple:

// Credit Card Validation Javascript
// copyright 12th May 2003, by Stephen Chapman, Felgall Pty Ltd

// You have permission to copy and use this javascript provided that
// the content of the script is not changed in any way.

function validateCreditCard(s) {
// remove non-numerics
var v = "0123456789";
var w = "";
for (i=0; i < s.length; i++) {
x = s.charAt(i);
if (v.indexOf(x,0) != -1)
w += x;
}
// validate number
j = w.length / 2;
k = Math.floor(j);
m = Math.ceil(j) - k;
c = 0;
for (i=0; i&lt;k; i++) {
a = w.charAt(i*2+m) * 2;
c += a &gt; 9 ? Math.floor(a/10 + a%10) : a;
}
for (i=0; i&lt;k+m; i++) c += w.charAt(i*2+1-m) * 1;
return (c%10 == 0);
}

If you update to Magento 1.4.1.0 and your theme does not include this file, your checkout will not work for credit card payment methods. When a Credit Card payment method is selected, the one page checkout will not proceed past the payment section. The continue button will not be clickable, rendering your Credit Card payment method completely unusable.

The solution is to add this new JS include in two places in your /app/design/frontend/default/[YourThemeName]/layout/page.xml

The first is in the default layout <block type="page/html_head" name="head" as="head"> section around line 37.

<block type="page/html_head" name="head" as="head">
<action  method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"  ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action  method="addJs"><script>lib/ccard.js</script></action>
<action  method="addJs"><script>prototype/validation.js</script></action>
<action  method="addJs"><script>scriptaculous/builder.js</script></action>
<action  method="addJs"><script>scriptaculous/effects.js</script></action>
<action  method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action  method="addJs"><script>scriptaculous/controls.js</script></action>
<action  method="addJs"><script>scriptaculous/slider.js</script></action>
<action  method="addJs"><script>varien/js.js</script></action>
<action  method="addJs"><script>varien/form.js</script></action>
<action  method="addJs"><script>varien/menu.js</script></action>
<action  method="addJs"><script>mage/translate.js</script></action>
<action  method="addJs"><script>mage/cookies.js</script></action>

<action  method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action  method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt  IE 8</if></action>
<action  method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action  method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

<action  method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt  IE 7</if></action>
<action  method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt  IE 7</if></action>
</block>

The second place you need to add this JS file is in the print section <block type="page/html_head" name="head" as="head"> around line 113.

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>

<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
<action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
<action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

<action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
<action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

</block>

Adding the new JS include in these two places should fix the checkout problem.

We have updated all of our themes and plugins with this new method to ensure proper checkout functionality on Magento 1.4.1.0.

If you need assistance updating your theme, please contact us.

About Jason Detamore

Jason is a talented and experienced website developer specializing in frontend development and usability. Jason oversees MagThemes' theme development and customer service and has been working with Magento since version 0.9.