It is hard to overstate the importance of the checkout. You can’t have a web shop without a checkout – it is where customers exchange money for goods and services, which is, basically, the whole purpose of a shop. Checkout is the most sensitive stage of online shopping because there customers have to trust the merchant with their money and personal data. At the same time checkout is often a very frustrating experience: to submit an order customers must provide detailed address and payment information using long forms with many fields to fill out. Add to that dependencies between fields and validation rules, and there is no wonder that some people may become annoyed and quit in the process.

The most common way to solve the problem with the checkout data collection is to break it into steps – in each step a customer provides only a portion of the required data. Dealing with one part of data at a time is also beneficial for the checkout software – validation rules and dependencies between data (e.g. some shipping carriers are available only for certain destinations) can be better defined and made transparent to customers. Customers progressing through the checkout step by step get a feeing of being in control which results in a better shopping experience.

Online retailers strive to make the checkout as unobtrusive and intuitive to customers as possible. This quest for the perfect checkout had produced the following approaches:

• Step-by-Step Checkout – the checkout stages (addresses, shipping methods, payment information, order review) are separated. Each step has its own form that the customer must fill out and submit before moving to the next stage. The advantage of this method is that it can be implemented without JavaScript and can be used in cases where JavaScript is not available.
• One Page Checkout – steps are accommodated in a single page under one URL where they are put into individual tabs. The navigation between tabs and the updating of the tabs’ content happen without reloading the page – Ajax requests handle the data exchange in the background. The biggest advantage of this method is that customers get a feeling that all their data are there in one place, and in the same time there is no endless list of input fields – generally, only the active step is shown while others remain hidden in the closed tabs.
• One Step Checkout – all steps are in one page, their input fields grouped in fieldsets but, unlike the one page checkout, all forms are visible. This approach is most advantageous when the number of fields to fill isn’t that great and breaking the process into steps makes little sense, for example, when your shop doesn’t need a shipping address and shipping method (selling downloads).
• One Click Checkout – this approach made famous by Amazon enables customers to buy goods with a single click. This method is possible only for customers who have an account in the shop with valid address and payment information that they let the merchant use as the default checkout data. The variations of the One Click checkout may have different names (e.g., “Express Checkout” or “Express Lane”) but they have one thing in common – using existing customer account data and skipping one or more steps. This way they relieve customers from a burden of typing it all in and reduce chances of them jumping off in the process.

Core Magento implements two of these types: One Page and Step-by-Step. One Page checkout is enabled right after Magento is installed and can be used for any product type. I will describe the One Page checkout process and its components in details in this chapter.

Multishipping checkout is a Step-by-Step type and allows customers to send orders to multiple addresses. The properties and limitations of this checkout are discussed in a separate chapter: Magento Multishipping Checkout.

Magento third-party developers offer a variety of modules some of which implement other checkout types. Later on, I will also present a tutorial on building a one-step checkout.

Checkout Settings

Before diving into the implementation details of One Page checkout, it makes sense to review settings that you can configure in the back-end under System > Configuration > Sales > Checkout

Checkout Options

• Enable Onepage Checkout – enables or disables One Page checkout (enabled by default). When it is disabled, the checkout buttons in the cart view disappear, and the only way to submit an order is to use Multishipping checkout (that is available to registered customers and for non-virtual goods only). Thus, One Page checkout is de-facto the default checkout – do not disable it unless you have a working alternative.
• Allow Guest Checkout – controls customers ability to checkout without using a customer account. This setting is enabled by default. Disabling it will remove the Guest checkout option from the checkout and customers will be required to either log in or to create a new account.
• Require Customer To Be Logged In To Checkout – when set to yes, this setting won’t let customers past the first checkout step without them either logging in or creating a new account. Normally, this option is disabled and customers who have no account but wish to create one are still allowed through the checkout steps, and their account is created at the end of the process automatically. But with this setting active, customers who wish to register will be redirected to the “Create an Account” page first – it is only after an account is created and the customer is logged in, can he proceed with the checkout.
• Enable Terms and Conditions – toggles the display of terms and conditions that customer must agree to in before placing an order. You can create these terms and conditions in the back-end under Sales > Terms and conditions.

Shopping Cart

• Quote Lifetime (days) – Magento keeps abandoned shopping carts (quotes) until the term set in this setting expires. A scheduled task cleans up expired quotes by calling method Mage_Sales_Model_Observer::cleanExpiredQuotes().
• After Adding a Product Redirect to Shopping Cart – this setting commands the system to redirect the customer to the shopping cart after a product is added to cart. If disabled, the customer remains on the same page and the system displays a success or an error message.
• Grouped Product Image – this settings allows you to choose what thumbnail to show for a grouped product item in cart – the product’s own image or the image of the parent grouped product.
• Configurable Product Image – similar to the previous option, when dealing with configurable products, this setting decides whether to show the image of the selected simple product or the thumbnail picture of its parent configurable product.

My Cart Link

• Display Cart Summary – this setting deals with the “My Cart” link that is displayed in the upper right corner of the shop page in the default theme. You can choose between displaying the total item quantity or the number of items (positions or rows) in the cart.

Shopping Cart Sidebar

• Display Shopping Cart Sidebar – this setting toggles the display of the cart block in the left sidebar.
• Maximum Display Recently Added Item(s) – here you can set the maximum number of products recently added to cart that are displayed in the sidebar cart block.

Payment Failed Emails

If an exception is thrown when processing the last checkout step and saving the order, the system dispatches an email to the shop administrator to notify him about a failed order. This tab contains the options to configure this notification email.

• Payment Failed Email Receiver – allows you to select to which email address the notification will be sent. The email addresses listed in the drop-down list can be set in the configuration under System > Configuration > General > Store Email Addresses.
• Payment Failed Email Sender – here you can choose the sender for the notification email, the source for the email address list is as in the setting above.
• Payment Failed Template – this drop-down list contains only one value that points to a file in the locale/LOCALE_NAME/template/email folder. The file’s name is payment_failed.html and it is set in the Mage_Checkout module’s config.xml file under node config/global/template/email/checkout_payment_failed_template/file.
• Send Payment Failed Email Copy To – in this input field you can enter one or more comma-separated email address to which a copy of the notification email will be sent.
• Send Payment Failed Email Copy Method – here you can specify the copy sending mode – either as a BCC or as a separate email.

One Page Checkout Process

The goal of a checkout is to create an order out of the content of a shopping cart. In Magento the shopping cart is a quote object (class Mage_Sales_Model_Quote) with one or more items that represent products added to cart by a customer. To submit an order a customer must provide valid address and payment details. The collection of these data is broken into individual steps that a customer must go through in a sequence. The checkout steps are:

1. Checkout Method or Login – where unauthenticated customers can enter their existing account’s credentials, or choose to create an new account, or proceed as guest customers. This step can be skipped if the customer is already logged in.
2. Billing Information – where customers must provide a valid billing address (or select one from their account’s address book, or enter a new one).
3. Shipping Information – where customers must provide a valid shipping address unless the billing address is used for shipping. This step can be skipped if no delivery to a physical address is required, e.g., for services, downloads, and other virtual goods.
4. Shipping Method – where customers must select one of the available shipping options. The selection normally includes various postal services with varying shipping costs. This step depends on the shipping address – some shipping methods may be not available to certain destinations. This step is skipped if the order doesn’t involve a physical delivery.
5. Payment Information – where customers must select one of the payment options – a credit card, money order, wire transfer – whatever is available in your shop. The selection may depend on data provided in the billing and shipping address steps: some payment options may not be available to certain destinations. Also, some payment providers may require a credit score check performed automatically using the customer’s billing address. If the score is too low, the customer won’t be able to use that payment method.
6. Order Review – where customers have a chance to check their order details and correct them by returning to the respective step. Additionally, customers may be required to accept the shop’s terms of service and other agreements that the merchant may ask for before accepting an order.
7. Order Success – the last step where customers are notified about the newly created order and can see the final order details.

The most prominent feature of One Page checkout is that switching between steps is possible without reloading the browser page. There are two exceptions – the “Login” step when the customer decides to login first, and the last “Checkout Success” step that is loaded after the checkout is completed. The saved data are displayed in the checkout page in a sidebar titled “Your Checkout Progress”. This sidebar not only allows customers to have an overview of their checkout information but also provides quick links to edit it in the respective steps.

The order of the checkout steps is important – data entered in earlier stages can influence choices later on. For this reason when a customer switches to a previous step, the data entered past that step are invalidated. For example, after clicking “Edit Shipping Address” in the final step and modifying the shipping details, the customer will have to repeat the later steps: selecting a shipping method and entering payment data.

Finally, when a customer arrives to the “Order Review” step and is satisfied with the entered information, the order can be submitted. At this point the system checks the data from the “Checkout Method”: depending on what method the customer uses, the new order will be created either for an existing customer account (the customer is logged in), or without a customer account (guest order), or a new customer account will be created. In the latter case, the system will not only create a new customer, but also will take the address data entered for the current order and save them to the new customer’s address book for future use as default billing and shipping addresses.

Magento transforms the current quote object into an order and saves it to the database. In this process the system checks if the selected payment method requires a redirect (e.g. PayPal), In that case, the browser redirects the customer to the payment provider’s website to enter additional payment details. If there is a problem, the customer comes back to the checkout to select another payment method. If everything is OK (or if no payment provider redirect was required), the customer proceeds to the checkout success page.

The discussion of this checkout type is continued in posts Magento OnePage Checkout Part 2: Model, Views, Controller and Magento OnePage Checkout Part 3: JavaScript.