This error occurs when the user gets to the final step in the Magento Onepage checkout: the order review. When they click the submit button the page loads for a few seconds and then a Javascript alert box is displayed with the message 'undefined'. Not only does this destroy the trust a customer has in your website, it actually stops them from completing the purchase. This means you are losing money and customers! Unfortunately there is no quick generic fix for this but hopefully, by explaining the cause and a way to identify the error, you will be able to overcome this on your own.

Magento Onepage Checkout & Ajax

The Magento Onepage checkout is split into sections: login; billing address; shipping address; shipping method; payment details and order review. As the user progresses through each section, an Ajax request is sent to Magento with the information relating to the current section. For example, when a user hits the continue button on the billing section, an Ajax request is sent to Magento with the user's billing address.This triggers a Magento controller that saves the data into the user's sales quote. This is useful because if the user decides to go back through your site and add something else to their cart (which is always good), they won't have to re-add their billing address. If you use a network traffic monitor - I use the Firefox plugin Httpfox - you can see these requests being sent and the data returned. Give it a try for yourself as it should help illustrate how the Magento Onepage checkout works.

The Problem

When an Ajax request is sent and a Magento controller triggered, the output is returned in the Ajax response. If all goes well, a correctly constructed JSON string is sent back informing the Onepage checkout whether or not the data was saved successfully. This works fine as long as there are no errors. If an error occurs, the error message that is produced by Magento is tagged into the response sent. When the Magento Onepage checkout receives this response, rather seeing a correctly constructed JSON string that it can parse, it see's the error. Not knowing what to do with this error, Magento spits out the undefined Javascript alert box.

Identifying the Cause of the Javascript 'undefined' Alert Box

There is a file which resides in your js folder inside your skin called opcheckout.js and contains the majority of Javascript used to run the Magento Onepage checkout - skin/design/frontend/package/theme/js/opcheckout.js. Open this file and search for alert(msg). For me this is on line 779, however this could be slightly different for you. Now a lot of people simply assume that they can comment that out line and the problem will go away, but alas, we are not so lucky. Modify that line to the following:

Notice the first alert, the one you just added. This alerts out transport.responseText, the content sent back from the Ajax response. Not only will this include JSON produced that Magento expects, the error message will have also been inserted, meaning that the response cannot be parsed as JSON data. See the image below which is a print screen of the error I got.

Alert Showing Actual Error Message

My error was related to a reward points module that I had installed for a client. I temporarily disabled the module and was able to checkout with no problems what so ever.

Conclusion

The undefined error is usually caused by a simple Magento template or model error. The fact that the error is triggered during an Ajax request makes it difficult to track down and debug. Fortunately, following the above steps should allow you to see the error message in a few minutes. Magento could easily overcome this problem by logging all malformed Ajax responses in the checkout and forwarding them on to a specified email address.

A Few Tips

• Once you have located the error, make sure you remove the extra Javascript alert you added to opcheckout.js!
• If you manage to find your error but have trouble fixing it, by all means post it in the comments or email me and I will do my best to help you solve the problem!