Often, checkout refers to the process by which customers pay for their order. Although this is true for in-store purchases, payment is only one step of the online checkout process. The fact that the customer is not present and the order must be shipped requires some additional steps, which makes the flow more complicated. The challenge is to speed up the process while ensuring that customer information is consistent and complete. The best way to expedite the transaction is to invite customers to create an account and save their address and credit card on file, which enables them to enter all their personal information in one tap the next time they place an order, rather than having to enter all the same information every time.
It would take a dedicated book to describe the checkout flow with all its possible variations. One thing I've learned about ecommerce over the past 20 years is that different businesses have different branding and workflow requirements. Thus, there can't be a checkout flow that fits all. However, there are several common steps that are similar to all the scenarios. Throughout this article, I'll explain what they are, why they exist, and what possible variations you should keep in mind when building a checkout application for your clients.
Adding the customer
Every order is associated with a customer, who can be an individual or a business. A customer's email address or phone number serves as their primary contact information for order confirmations and other correspondence. It is important to collect the customer's email address as the first step of the checkout process for marketing purposes as well. Email addresses allow merchants to trigger abandoned checkout recovery emails with the goal of inviting customers to complete their order should they abandon their checkout. Therefore, it is also important at this stage to include an opt-in flag so that customers can approve marketing campaigns.
A logged-in customer would skip this step, since their email address would already be associated with their account, and the opt-in checkboxes would be managed by the account. In such cases, the email address is read-only information that informs the customer about their logged in session.
Adding a billing address
The billing address is where a person or company receives their bills or financial statements. Also, it is the address associated with the credit card or other form of payment used for the order. In many cases, it is used in conjunction with an anti-fraud process that is required for card-not-present transactions.
Every type of transaction, including the sale of digital products, requires a billing address. Therefore, even if no shipping address is required. Although, when selling physical goods, the shipping address will often be requested before the billing address, which may also be part of the payment information.
A logged-in customer with an address book saved should be able to select one of their addresses as the billing address. Typing a full address is quite time-consuming, so this is one of the options that speed up the checkout flow more significantly.
Adding a shipping address
For physical goods to be delivered, a shipping address must be provided. It can be the same as or different from the billing address, so giving the option to ship the order to the same address as billing is an effective way to speed up the process.
International sales may limit the shipping country to one or more countries. In fact, when the customer selects a country at the beginning of their shopping session, they are setting the country for their shipping address, which affects delivery availability, cost, price list, taxes, and other market conditions.
In a sophisticated checkout flow, the customer should have the option to split their order into several shipments, if they wish to send some items to a friend and others to themselves. Similarly to the billing address, logged-in customers should be able to select an address from their saved address book.
Selecting a shipping method
Once the shipping address has been added to the order, the customer will be able to choose one of the available shipping methods. Customers should be provided with delivery lead times and costs for each method. Generally, the shorter the delivery time, the higher the cost.
For multiple shipments, the customer should select a shipping method per shipment. Orders may be split based on stock availability or because a customer has split the order to ship part of it to a different address. When only one shipping method is available, preselecting it and sending the customer directly to payment could be a good idea. A preselection could also be made based on customer preferences or order history if the customer is logged in.
Selecting a payment method
A payment method is the method the customer chooses to pay for their order. Credit cards, PayPal, BNPL, wire transfers, or express payments like Apple Pay, Google Pay, or Amazon Pay are the most common methods.
Payment methods are connected to payment gateways like Stripe, Adyen, Klarna, etc. A payment method selection may also incur a cost that will be added to the order. An effective way to increase conversions is to offer more payment methods. International sellers should offer local payment methods as well, so that their customers feel comfortable providing their payment information. The payment method determines what type of payment instrument will be used for the order's payment details.
Adding payment details
After selecting a payment method, the customer must enter their payment details, such as their credit card number and expiration date. Paying with PayPal, Klarna, or other external providers can redirect the customer to a hosted form which collects the payment information in a secure window handled completely by the payment service provider.
The payment step is probably the most delicate of the entire checkout process. It must be fast, secure, and frictionless for the customer. Payment information should never be transmitted to the server, regardless of whether it is collected inline or through a hosted form. Payment details should be tokenized on the client side and a secure token should be transmitted for all server-side communications. Logged-in customers should be able to reuse credit cards stored on file, making the payment process faster and more secure.
Placing the order
Upon confirmation of payment details, payment is authorized with the payment gateway. If authorization is successful, the order is placed.
When placing an order, a number of other validations are triggered behind the scenes, including fraud check and stock availability verification. Those validations can take time, reducing order processing speed. In high volume transactions websites, placing orders asynchronously is one of the best methods of increasing order throughput. Essentially, the order is placed on a queue that some workers will validate offline. As a result, the last step of the checkout becomes instant, increasing conversion rate.
Take control of your checkout!
The awesome graphics used here are courtesy of Simone Fiorucci, our very own documentation engineer at Commerce Layer. Follow his step-by-step guide if you want to learn how to build a headless checkout application from scratch. You can also fork our open source checkout application on GitHub and use it as a reference for your next project.