Cannot Enter Credit Card Details at Checkout in IE9 - Magento

With the release of IE9 there was a sigh of relief for the web developers. Finally Microsoft released a browser that promised adherence to W3C standards and the cessation of compatibility headaches. However, not everything is rosy.

If you have a Magento site, you may have already received complaints from customers using the new IE9. The most serious issue is when you only have one payment method enabled in the checkout and this method takes the credit card details directly on your site. In this case, all the fields will stay disabled, preventing the customer from being able to complete the payment.

This is reported here and here and Alan Storm has also posted about it and provided a quick workaround.

The issue comes from the fact that Magento uses an older version of the Prototype JavaScript library for its DOM manipulation.

The quick fix is to fool IE9 to “think” it’s acting as IE8 by adding a custom meta tag to the page header like so:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

I personally opted for the .htaccess approach (thanks to the comment by Joe Fletcher) to avoid altering site files and believe it’s slightly more elegant as it can easily be removed when the issue is fixed. For this to work, you must have the Apache Headers module enabled.

Add this to the end of your .htaccess file:

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support