By Usman Mohyuddin
Shopping cart abandonment is an issue you should be aware of if you own an online store; it happens when a user leaves your e-shop without completing the checkout process. This behavior can lead to a high cart abandonment rate and low conversion rate.
Customers abandon their carts for many reasons, such as poor design, a complex checkout process, website crashes, and limited payment methods. So, even if you’ve invested a lot in your e-shop, an ineffective or inefficient checkout process may still lead to a high cart abandonment rate and ultimately damage your business.
Usually, a checkout page consists of multiple segments that allow the customer to enter different types of data, such as personal information, shipping details, and payment methods. Depending on the needs of your business, your checkout can consist of a single page or multiple pages; what’s important is to adhere to certain best practices to maximize the conversion rate.
This article demonstrates how you can build a standout checkout page using HTML and CSS.
What Is a Checkout Page?
In simple words, a checkout page is an online version of the checkout counter of a physical store, and represents the steps customers perform to complete their shopping. If these steps aren’t carefully designed, the shopping cart runs the risk of being abandoned.
Whenever a shopper closes a window without completing their checkout, you lose revenue. Out of every hundred online shoppers, sixty-eight—that’s over two thirds—leave without completing their order.
“Average cart abandonment rate is 68.8%.”–baymard.com
A study by the Baymard Institute on the causes of cart abandonment concluded that the majority of instances are due to high extra fees (shipping, taxes), forced account creation, or an unnecessarily complicated checkout process.
Cart abandonment leads to online stores losing $18 billion USD in sales each year, so it’s an important metric to monitor; a high rate can potentially indicate a poor user experience or a broken conversion funnel.
What Should You Consider When Building a Checkout Page?
Every checkout page has the following sections:
- Shopping cart summary
- Personal information (eg, name, email, contact, address)
- Shipping methods (eg, FedEx, DHL)
- Payment methods (eg, PayPal, Visa, Apple Pay)
However, if you want your checkout page to excel, there are other, more advanced features you should consider, such as error handling, checkout instructions, and your backend payment API.
The following are some key factors you should consider when building your checkout page.
Ease of Use
Usability should be the top priority when building a checkout page. The form fields and their descriptions should be self-explanatory, and when you update any information, such as adding a gift card or changing the quantity, this change should appear instantly.
Accessibility
Accessibility involves making your website more user-friendly and understandable for any kind of visitor. Keep in mind that your site visitors may be people with disabilities (eg, blindness, low vision, or learning or physical disabilities).
The Web Accessibility Initiative (WIP) has established certain web accessibility standards, and they recommend that four main principles be considered when designing web content: your content should be perceivable, operable, understandable, and robust. In this instance, “robust” content refers to having an easily parsable HTML structure, which is compatible with tools like screen readers.
Simple and Distraction-Free Design
Your checkout page should be as simple as it can be. Some e-shops have blinking images, auto-playing videos, ads, and too many animations in the header and the footer of the page. These factors, combined with the checkout form’s location at the bottom of the page, can lead to a poor user experience.
While designing the page, you should build on SEO guidelines and eliminate distractions.
“The less barriers to entry you can throw up in the user adoption process, the higher your conversion rate can be.”–Sherice Jacob
Error Handling
Checkout page errors can prevent customers from completing the order. For example, customers can’t proceed if they haven’t entered data in a required field.
For a smooth checkout process, you must make sure any kind of error will be handled effectively. Whenever an error occurs, make it prominent, readable, and context-aware, so that the user can act on it quickly.
Mobile-Friendliness
The process of buying and selling items via a tablet, mobile, or other handheld device is referred to as mobile commerce, or m-commerce.
According to projections, mobile devices will account for 6.9% of all retail transactions in 2022, rising to 10% by 2025.
In short, a mobile-friendly e-shop gives your customers the advantage of being able to shop from the comfort of their homes. So if you own a business, you should focus on attracting and serving a mobile audience.
Compared to desktop sites, mobile sites/applications are faster to load, have better SEO rankings, increase sales, and make your business more competitive.
A Backend API
Carts are sometimes abandoned due to a lack of payment method options; the customer can’t complete the purchase if you don’t offer a payment they can use.
This is where a backend API comes in useful, specifically, to integrate the payment modules. Offering every potential payment method (eg, credit and debit cards, mobile wallets, bank transfers, cash on delivery, prepay, and postpay) can be very challenging and adopting a backend API that offers these services as standard might be your best option.
For example, Rapyd’s Hosted Checkout Page offers an extensive range of payment methods and also includes multi-currency options, global acceptance, and even built-in fraud protection. When developers are looking for a solution that provides a PCI-DSS certification (Payment Card Industry Data Security Standard) to handle credit card information, the Hosted Checkout Page offers this with one API integration.
This is important to remember when accepting payments, and building your own custom checkout page. You will need to follow standards of PCI Compliance, which is listed beyond the scope of this article. We’ll focus on steps to implement a simple frontend interface for your checkout page.
Implementing a Checkout Page in HTML and CSS
Although building a checkout page may seem simple, you should carefully consider your design to make sure that it’s easy to use, accessible, and encourages purchases.
This tutorial assumes you have a basic understanding of HTML and the Bootstrap CSS framework. jQuery and Font Awesome were used for validation and fonts, respectively.
First, you’re going to create an HTML structure to initiate the checkout process. You’ll have a main container class inside the tag to wrap everything around:
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<title>Payment Process</title>
</head>
<body>
<div class="container mb-5 mt-5">
<div class="row">
<a href="components/payment.html">Start Payment Process</a>
</div>
</div>
</body>
</html>
Adding a Cart or Summary Section
The initial screen you encounter during the checkout process is the cart or summary section.
A user-friendly screen should provide:
- A step indicator, if its a multi-screen process
- An overview of your cart including product description, quantity, and price
- The total amount
- The option to increase or decrease the quantity of each product
- The option to remove products from the cart
For this cart section, you can use an HTML and Bootstrap CSS to build the structure and apply styles, respectively.
There are two sections on this page, a step indicator, and a cart view. You need to wrap these two sections inside a container class:
<div class="container mb-5 mt-5">
<div class="row text-center">
<div class="col-md-12 col-lg-12">
<div class="row text-muted">
<div class="h2 col-12">Rapyd</div>
<div class="col-lg-12 col-md-12 dashhead-subtitle h6 text-capitalize text-muted">
<span id="viewCart" class="text-warning">Cart</span> » <span id="viewInformation">Information</span> » <span id="viewShipping">Shipping</span> » <span id="payment" > <span id="enterpayment" >Enter Payment</span> » <span id="confirm" >Confirm</span> </span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row mt-5">
<div class="col-4">
<h5>Products</h5>
</div>
<div class="col-2">
<h5>Price</h5>
</div>
<div class="col-3">
<h5>Quantity</h5>
</div>
<div class="col-2">
<h5>Total</h5>
</div>
<div class="col-1">
<h5></h5>
</div>
</div>
<div class="row">
<div class="col-4">
TOMS Unisex Syanno Black Canvas Shoes
</div>
<div class="col-2">
<span id="price_1">10</span>
</div>
<div class="col-3">
<div class="number">
<span class="minus">-</span>
<input class="txtQuantity" id="txtQuantity_1" type="text" value="1"/>
<span class="plus">+</span>
</div>
</div>
<div class="col-2">
<span id="total_1">10</span>
</div>
<div class="col-1">
<a href="#" class="text-danger">remove</a>
</div>
</div>
<div class="row mt-3">
<div class="col-4">
TOMS Kids Ninove Black Canvas Shoes
</div>
<div class="col-2">
<span id="price_2">20</span>
</div>
<div class="col-3">
<div class="number">
<span class="minus">-</span>
<input class="txtQuantity" id="txtQuantity_2" type="text" value="1"/>
<span class="plus">+</span>
</div>
</div>
<div class="col-2">
<span id="total_2">20</span>
</div>
<div class="col-1">
<a href="#" class="text-danger">remove</a>
</div>
</div>
</div>
</div>
</div>
Adding a Guest Checkout, User Signup, or Login Section
Requiring your customer to log in or create a user account to complete checkout is always harmful to your conversion rate; these create unnecessary barriers in the checkout process, which often leads to cart abandonment.
The freedom to check out as a guest is a standard, and it’s always a good idea to provide multiple options that allow the customer to decide to create a login or proceed as a guest.
So, whenever you’re designing a checkout page, make sure to include a method for customers to complete their orders without having to create an account.
The following code will set up an option to complete orders as a guest or a member:
<div class="row flex-row-reverse">
<div class="col-12 col-lg-4 float-right pl-1 pr-1 text-center text-lg-left">
<button class="btn btn-outline-primary btn-lg col-xs-6 col-xs-offset-3" type="button">
MEMBER CHECKOUT
</button>
</div>
<div class="col-12 col-lg-4 float-lg-left pl-0 pr-0 text-center text-lg-right">
<button class="btn btn-outline-warning btn-lg col-xs-6 col-xs-offset-3" type="button">
GUEST CHECKOUT
</button>
</div>
</div>
Adding a User Details Input Section
Having an appropriate screen for entering user details is very important. However, many e-shops put too many fields on this screen, and then often ask for the same information on subsequent pages. This delays the checkout process and can lead to customers abandoning their order.
The amount of information your customer needs to enter should be limited to what is relevant, and information from fields that are relevant to other sections should be automatically reused as needed.
For example, if the user has entered their address in their personal information, they should not be forced to enter it again on the shipping or billing screen, if it’s the same.
The following code will set up a section to take user details such as name, email address, and contact information:
<div class="col-12 col-lg-6 justify-content-center border-lg-right">
<div class="row justify-content-center">
<div class="col-6" style="font-size: 18px;">
Contact information
</div>
<div class="col-6">
Already have an account? <a href="#" class="text-info">Log in</a>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row mt-2">
<div class="col-12">
<div class="w-75">
<input id="txtEmail" name="txtEmail" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="email" title="" placeholder="Please enter email" value="">
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-xl-12">
<div class="row justify-content-center">
<div class="col-12" style="font-size: 18px;">
Shipping address
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<select class="selectpicker countrypicker dropdown-header w-100" data-live-search="true" data-default="United States" data-flag="true"></select>
</div>
<div class="col-12 mt-4">
<div class="row">
<div class="col-6">
<div class="w-100">
<input id="txtFirstName" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="First Name" value="" name="txtFirstName" required>
</div>
</div>
<div class="col-6">
<div class="w-100">
<input id="txtLastName" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Last Name" value="" name="txtLastName" required>
</div>
</div>
</div>
</div>
<div class="col-12 mt-4">
<div class="w-100">
<input id="txtAddress" name="txtAddress" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Addess" value="" required>
</div>
</div>
<div class="col-12 mt-4">
<div class="row">
<div class="col-6">
<div class="w-100">
<input id="txtCityName" name="txtCityName" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="City Name" value="" required>
</div>
</div>
<div class="col-6">
<div class="w-100">
<input id="txtPostalCode" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Postal Code" value="" name="txtPostalCode" required>
</div>
</div>
</div>
</div>
<div class="col-12 mt-4">
<div class="w-100">
<input id="txtPhoneNumber" name="txtPhoneNumber" class="form-control" type="number" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Phone number" value="">
</div>r
</div>
</div>
</div>
If you’d like to send promotional emails to your users, make sure to get their consent using a separate field in the course of taking their personal information for their order.
After you enter the following code, a checkbox will be created to capture the consent:
<span class=" pl-4">
<input class="form-check-input" style="cursor:pointer;" type="checkbox" name="cbEmailOffers" id="cbEmailOffers">
<small class="txtEmail-field text-muted">Email me with news and offers</small>
</span>
Adding a Shipping Method Selection Section
Shipping is very important in e-commerce. An e-shop must have multiple shipping methods so that users can choose the one that best suits them.
The following code will create a screen that provides several shipping methods:
<div class="container">
<div class="row mt-4">
<div class="col-xl-12">
<div class="row justify-content-center">
<div class="col-12" style="font-size: 18px;">
Shipping method
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="rbShippingMethods" id="rbFedEx" checked>
<label class="form-check-label" for="rbFedEx">
FedEx
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="rbShippingMethods" id="rbDHL">
<label class="form-check-label" for="rbDHL">
DHL
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="rbShippingMethods" id="rbExpress">
<label class="form-check-label" for="rbExpress">
Express
</label>
</div>
</div>
</div>
</div>
When a user is filling out information on different screens, it’s always a good design strategy to show a summarized overview of your cart in the side panel.
Creating a Payment Method Selection Section
With the growing e-commerce market and payment options, you can’t assume which payment method your customer will prefer. Therefore, make sure you offer a variety of payment methods, including credit and debit cards, as well as e-wallets.
Additionally, payment methods must be secure and protected from theft or fraud.
Using the following code, you can create a screen that has multiple payment methods:
<div class="row mt-4">
<div class="h4 col-12">Payment</div>
<div class="col-12">
All transactions are secure and encrypted.
</div>
</div>
<div class="accordion mt-4" id="paymentMethods">
<div class="card">
<div class="card-header" id="creditDebit">
<h6 class="mb-0 ml-4">
<input class="form-check-input" type="radio" name="rbPayments" id="rbCreditAndDebit" data-toggle="collapse" data-target="#collapseCreditDebitInfo" aria-expanded="true" aria-controls="collapseCreditDebitInfo" checked>
<label class="form-check-label" for="rbCreditAndDebit">
Credit & Debit Cards
</label>
</h6>
</div>
<div id="collapseCreditDebitInfo" class="collapse show" aria-labelledby="creditDebit" data-parent="#paymentMethods">
<div class="card-body">
Credit and debit card info if any.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="paypal">
<h6 class="mb-0 ml-4">
<input class="form-check-input" type="radio" name="rbPayments" id="rbPayPal" data-toggle="collapse" data-target="#collapsePayPalInfo" aria-expanded="false" aria-controls="collapsePayPalInfo">
<label class="form-check-label" for="rbPayPal">
PayPal
</label>
</h6>
</div>
<div id="collapsePayPalInfo" class="collapse" aria-labelledby="paypal" data-parent="#paymentMethods">
<div class="card-body">
PayPal Info
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="applePay">
<h6 class="mb-0 ml-4">
<input class="form-check-input" type="radio" name="rbPayments" id="rbApplePay" data-toggle="collapse" data-target="#collapseApplePayInfo" aria-expanded="false" aria-controls="collapseApplePayInfo">
<label class="form-check-label" for="rbApplePay">
Apple Pay
</label>
</h6>
</div>
<div id="collapseApplePayInfo" class="collapse" aria-labelledby="applePay" data-parent="#paymentMethods">
<div class="card-body">
Apple Pay info
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="googlePay">
<h6 class="mb-0 ml-4">
<input class="form-check-input" type="radio" name="rbPayments" id="rbGooglePay" data-toggle="collapse" data-target="#collapseGooglePayInfo" aria-expanded="false" aria-controls="collapseGooglePayInfo">
<label class="form-check-label" for="rbGooglePay">
Google Pay
</label>
</h6>
</div>
<div id="collapseGooglePayInfo" class="collapse" aria-labelledby="googlePay" data-parent="#paymentMethods">
<div class="card-body">
Google Pay info
</div>
</div>
</div>
</div>
Once the user has selected the payment method, the following code will then add an option for the user to enter their card information:
<div class="container mb-5 mt-5">
<div class="row text-center">
<div class="col-md-12 col-lg-12">
<div class="row text-muted">
<div class="h2 col-12">Rapyd</div>
<div class="col-lg-12 col-md-12 dashhead-subtitle h6 text-capitalize text-muted">
<span id="viewCart" >Cart</span> » <span id="viewInformation">Information</span> » <span id="viewShipping">Shipping</span> » <span id="payment" > <span id="enterpayment" class="text-warning">Enter Payment Card Info</span> » <span id="confirm" >Confirm</span> </span>
</div>
</div>
</div>
</div>
<div id="pnlCreditCardSection" class="mt-5">
<div class="mx-auto">
<div class="row justify-content-center">
<div class="col-9 my-4 py-1">
<h2 class="text-center">Credit & Debit Cards Information</h2>
</div>
</div>
<div class="row">
<div class="col-7 mt-3 mt-lg-0 text-center mx-auto">
<!--Hosted Field for CC number-->
<div class="row mb-4">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-3 col-md-3 col-12 text-left">
<span class="text-muted recorddetaillabel mr-1">Card Number *</span>
</div>
<div class="col-lg-6 col-md-6 col-12 text-lg-right text-md-right text-right text-sm-left">
<div class="row">
<div class="col-12 pr-1">
<div class="input-group">
<div class="w-100" aria-label="Card Number" aria-describedby="card-number-logo">
<input type="number" class="center-block form-control" id="card-number" required/>
</div>
<div id="card-logo" class="pt-2 mx-2 input-group-append">
<img alt="card image" src="https://files.readme.io/9018c4f-Visa.png" height="20px" id="card-number-logo">
</div>
</div>
<span class="helper-text text-left" id="ccn-help"></span>
</div>
</div>
</div>
</div>
<!--Hosted Field for CC EXP-->
<div class="row mb-4">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-3 col-md-3 col-12 text-left">
<span class="text-muted recorddetaillabel mr-1">Exp. Date *</span>
</div>
<div class="col-lg-6 col-md-6 col-12 text-lg-right text-md-right text-right text-sm-left">
<div class="row">
<div class="col-12 pr-1">
<div class="input-group">
<div class="mr-2" data-bluesnap="exp">
<input type="date" value="2022-01-01" min="2000-01-01" class="center-block form-control" id="exp-date"/>
</div>
</div>
<span class="helper-text text-left" id="exp-help"></span>
</div>
</div>
</div>
</div>
<!--Hosted Field for CC CVV-->
<div class="row mb-4">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-3 col-md-3 col-12 text-left">
<span class="text-muted recorddetaillabel mr-1">Security Code *</span>
</div>
<div class="col-lg-6 col-md-6 col-12 text-lg-right text-md-right text-right text-sm-left">
<div class="row">
<div class="col-12 pr-1">
<div class="input-group">
<div class="mr-2" data-bluesnap="cvv">
<input type="text" class="center-block form-control" id="cvv" required/>
</div>
</div>
<span class="helper-text text-left" id="cvv-help"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row flex-row-reverse">
<div class="col-12 col-lg-6 float-right pl-1 pr-1 text-center text-lg-left">
<button class="btn btn-outline-primary btn-lg col-xs-6 col-xs-offset-3" type="button" id="submit-button">Next</button>
</div>
<div class="col-12 col-lg-6 float-lg-left pl-0 pr-0 text-center text-lg-right">
<input type="button" name="btnBack" value="Back" id="btnBack" class="btn btn-lg btn-outline-primary mb-3">
</div>
</div>
</div>
</div>
When the above code renders, it will show the following screen.
Following the selection of a payment method, the user will be prompted to provide additional information. If they’ve chosen a debit or credit card, for example, the following screen will prompt them to enter their card information.
Conclusion
Regardless of how much you invest in your e-shop or how beautiful it looks, a poor checkout experience can damage your online business. There’s substantial evidence that a subpar checkout experience can be a major factor contributing to cart abandonment.
By following the tips in this article, you can use HTML and Bootstrap CSS to build a checkout page that provides a good checkout experience and boosts your business.
This article also explained some of the key features that a checkout page should have, such as user details, cart summary, shipping details, and payment methods.
In addition, the following articles will assist you in expanding your knowledge on how to create a checkout page:
Rapyd not only allows you to integrate a hosted checkout page into your application, but also to customize it to meet your specific needs.
You can generate a checkout page via API or directly from Client Portal and customize the page with even just a click of a button.
With Rapyd, you can collect and disburse funds in more than a hundred countries and sixty-five currencies, using thousands of local payment and payout methods. Rapyd is a great choice if you’re looking to generate a checkout page from the Client Portal or use a single API integration that can help you handle all the steps of the checkout process in your application.