Overview
The checkout module is the final step in the buyer's journey on any e-commerce website. This is where their grand total is summarized and they pay for the products and/or services they added to their shopping cart. Hotcakes Commerce decreases the potential for abandoned shopping carts online by providing you with a single-page checkout and guest checkout as out-out-the-box features. Customers that arrive at the checkout page are instantly updated in real-time as they complete the checkout form when the taxes and/or shipping values change due to any promotions or other settings you might have configured.
Requirements
The following prerequisites will be necessary to accomplish the goals of this article:
- Have access to your Hotcakes store administration
- Configure your store using the getting started wizard or do it manually
- Have one or more products added to your store catalog
Getting Started
The information provided here is based upon the default configuration of Hotcakes and the default viewset. Your views may have more or less functionality, depending on how it was implemented by your technical team.
Checkout Module
If you used the getting started wizard to set up your store, this module will already be available for you, but you won't see it exposed in the menu. In order to navigate directly to the checkout, you can do one of the following:
- Add a product to the cart, then click the checkout button
- Use the page administration to find and navigate to the page
- Enter the URL manually
- Create a link to the checkout page
- Make the checkout page visible in the menu by changing the visibility setting
It's not advised to have the checkout page be visible to the public in your menu in most use cases. Customers should instead navigate to the checkout page organically as part of their shopping experience.
When a customer first views the module, there will be several sections shown, depending on the current state of their shopping journey. Each section is described in more detail below.
A great deal of research and testing has gone into the structure of the checkout view. The order of the sections has been found to be critical to the success of customers completing the checkout. It's not advised that you change the order or visibility of these sections.
Order Summary
The order summary displays the grand total to customers. The grand total will include line items (products/services), taxes, VAT (if configured), shipping, and promotional discounts. Some of these values may not be seen when the page first loads. Those values may require additional information, such as the shipping address being filled in. Once the requisite information is entered by the customer, the order summary values will update dynamically.
The default functionality has this section placed in the view in a static way. As you scroll down the page, it remains in its original location. Some stores find value and benefit in making this section scroll with the page. This is something you can do by modifying your viewset.
Login
The login section allows customers to create a new user account in the store, log in to their existing user account, or checkout as a guest. If the customer arrives on the checkout page while already logged in, this section will not be shown. Each login section is described and shown below.
The new account features allow customers to create a user account on your website as part of the checkout process. User accounts are created regardless of which method they decide to use here, but this allows them to specify their desired username and password. If this option is selected, all displayed fields are required.
When selected, the login section allows a customer to enter their username and password to login instantly. This is especially useful for stores that offer discounts to customers based on their user account. Examples of this include using pricing groups and promotions.
Clicking the "Login" button will authenticate the customer and then update this section. If necessary, the order summary will also update with any applicable discounts.
If the customer doesn't remember their login, they can click the "Forgot Password" button. When they do, they'll be redirected to the built-in password reminder page.
Guest checkout is the most popular option used by customers since most don't feel that they need to have a user account created when checking out of an online store. All they need is a valid e-mail address.
When this option is used, a user account is still created for the customer. This is necessary to help associate orders to a person/user account for customer service purposes, as well as to help them view their order history at any point in the future.
Shipping Address
The shipping address section allows a customer to enter the address where their products will be shipped. If there are no shippable products found in their shopping cart, this section will not be displayed.
The values shown in the Country and State drop-down lists may are populated by the configuration you specify in the store administration area.
The Company, Address 2, and Phone Number fields are not required. Other fields may become optional depending on the type of address entered.
If you enable shipping validation, the values entered here will be validated when the "Place Order" button is clicked.
If the customer has placed an order in the past, or if they've added one or more addresses to their address book, they'll see an additional drop-down list at the top of the form. When they select an address, it will populate the form fields for them.
Delivery Options
The delivery options section will be displayed only if there is at least one shippable product in the shopping cart.
If you see a message stating, "To Be Determined. Contact Store for Details" it's because you either haven't configured any shipping methods yet, or none of the configured shipping methods can be displayed due to the information given by the customer.
When you have at least one available shipping method configured, the message below will be shown to customers. This will automatically change once enough information is entered into the shipping address fields.
When the shipping address section has enough information to find available delivery options, they'll all be shown, as seen in the example below. The cheapest option will be selected automatically, and the options will be ordered from lowest to highest cost.
Billing Address
The billing address section functions the same as the shipping address section, except the billing address will always be shown.
The checkbox will be checked by default. If the customer wishes for their billing address to be different than their shipping address, the checkbox can be unchecked. This will display all of the requisite address fields.
Gift Card
Customers will only see the gift card section if you've enabled gift cards in your store. Once you enable it, you'll see the section appear just above the payment method section. Customers may enter one or more gift cards, but only one at a time.
If a gift card supplied has a positive balance, it will be applied to the order. It's possible for the gift card to cover the entire order amount.
Payment Method
This section display all configured/enabled payment methods to the customer. Most often, this will at least be the credit card form that you see below. If there is more than one payment method enabled, only one may be used for checkout. Except for gift cards, multiple payment methods are not supported at this time. Each payment method will require different information to be entered by the customer.
Special Instructions
The special instructions section allows customers to provide additional information. This might be instructions or any other text-based information. For example, the customer may specify that they don't want shipping to occur right away using this field. This field is optional.
Terms of Use
If enabled, customers will see an additional field that requires them to accept certain terms as part of their checkout process. When enabled, the checkout will require that this checkbox is checked before the customer can successfully place the order.
Receipt
When the customer successfully places an order, they're shown a receipt view, as seen below, and their shopping cart will now be an order in the system. This receipt view will include everything they'll have received in their receipt e-mail, including billing/shipping address, line item (product) list, and the grand total summary.
The customer may receive additional e-mails from the CMS as well if they're new to your store. This would include a user account notification and password reset.
Payment Declined
If there is a problem with the payment, the customer will be redirected to a payment reconciliation view. Their shopping cart will still exist, and this view will only have the billing and payment information shown. This gives them the opportunity to update their payment information, as necessary.
Clicking the "Place Order" button will attempt to place the order again using the updated payment information. Alternatively, the customer may choose to cancel the order. When this is done, the order is marked as canceled and their shopping cart is cleared.
Module Settings
This module has optional settings that you may choose to take advantage of. These settings allow you to change the view that may be used in the checkout process. In most stores, these settings are not necessary to be used.
The label above each setting will change to the selected view name, should you choose to override the default views found in your viewset.
| Setting | Description |
| View | This is the default view used to display the checkout view itself (everything discussed above). |
| Receipt View | The view that's shown to customers once the order is successfully placed. |
| Payment Error View | This view is shown to customers when their selected payment method is declined. |
| PayPal View | This is the confirmation view that customers are redirected to when using the offsite PayPal payment method, after they pay on the PayPal website. |
Viewset View Location
You'll find the views for this module in the following location in your viewset:
~\Areas\Account\Views\Checkout
Module Placement
If you used the getting started wizard, this module will initially be placed on the Checkout page, hidden, but under the Hotcakes Store navigation menu.
In general, there's nothing to keep you from moving and renaming the module in nearly any way. However, in most stores, the default placement and naming should be sufficient.
Permissions
In most stores, this module should be visible to all visitors. The only use cases that should deviate from this advice are those that don't accept payments online. Examples of this include product catalogs and request for quote style websites.
Need More Help?
Do you need more assistance with this article? Please review your support options.