Break free from your templated checkout
With the surge of transactions happening online, eCommerce businesses are optimizing their checkout to improve conversion rates and stand out from the competition. Checkouts have long been the cornerstone for any eCommerce business, but have also traditionally been complex and difficult to customize.
At Commerce.js, we’ve obsessed over the checkout experience from day one. In this 2-part series, we’ll cover the importance of the checkout, the different flavours of checkouts, how Commerce.js approaches checkout development, and why you should be optimizing/experimenting at the checkout.
It’s all about the checkout
The checkout is hands down the most important phase for any commerce transaction.
It’s that delicate moment where people actualize their need or want for a good or service, part with their cash, and become a customer.
The checkout is also the most overlooked and ignored aspect of commerce. Let's look at why later on.
The purpose of the checkout
There’s a lot going on at the checkout, but at its core, the checkout:
- Records relevant shipping and customer information for the order
- Enables deeper customer engagement like upsells or memberships
- Collects payment from customers
- Sets the tone of your brand as the last touchpoint with customers
The checkout is where the most important conversion actually happens.
Types of checkouts
Checkouts come in different flavours and vary based on the type of business and transaction being made. Your ability to dictate or alter the checkout flow is determined by the platform or technology running it behind the scenes. Let's take a look at the different types of checkouts:
Payment only checkouts
For business who just need to accept payments.
Gateways like Stripe, Square, and PayPal are well known payment gateways that facilitate payment checkouts. These are typically easy to integrate checkouts that capture simple payment related information and nothing more. These checkouts are usually seen on SaaS or membership websites.
Below is a Stripe Elements checkout.
Hosted eCommerce checkouts
For business that sell a range of products, and need to capture more than payment information at the checkout (shipping information and custom data).
Providers like Shopify, Squarespace, Bolt and Fast (1-click checkout), all provide hosted checkout solutions that are used by businesses selling physical goods. These hosted checkouts cannot be fully customized and so have a standardized look and flow to them.
Below are Shopify and Bolt checkouts.
Customizable eCommerce checkouts
For businesses that sell products and have specific data and design requirements around their checkout.
These checkouts can be customized to look anyway you want, capture unique data from customers, and can be implemented into any frontend or device. Customizable checkouts are powerful tools for increasing engagement, enriching data collection and improving conversions.
Below are custom checkouts using Commerce.js.
One checkout doesn’t fit all businesses
There’s no denying it, the internet is starting to look the same, and the checkout is by far the most homogenous experience. Content and commerce platforms that provide hosted, templated checkouts are driving this sameness all while commoditizing a businesse's brand. Just think of Amazon— where your brand goes to die.
Below are 16 different brands with the same checkout…
Every business is unique and sells different products to different customer segments, all with different levels of purchasing intent. Unfortunately, this isn’t being captured or reflected in the purchasing experiences delivered by many brands today.
It’s crazy to see premium brands selling $2,000+ priced products, using the same hosted checkouts as drop-shippers selling $5 products.
Experiment, be different
A checkout experience is a lot like a sales pitch. Sales people tailor their sales pitch & process to each customer, so why not do the same with your website?
With Commerce.js you can be different. You can create completely unique purchasing experiences that are specific to your brand and customers.
Let’s dream for a second.
What if you could take customers through two different purchasing journeys on the same website?
- If cart value is low, take customer through a lightweight checkout
- If cart value is on the high end, make customer feel more comfortable by going through a robust, multi-step checkout, with a confirm order page
What if you could tailor the checkout or purchasing experience based on what is inside of the customer’s cart (or the Cart DNA as we like to call it)?
- Product 1 and 3 in cart = checkout A
- Product 2, 4, and 5 in cart = checkout B
What if you could make your checkout as friction-less or friction-full as you wanted?
- Input fields for; email, payment = frictionless
- Input fields for; customer details, shipping details, membership preferences, subscription cadence, custom data = friction-full
How you configure a checkout comes down to localization, industry, product type, customer persona, as well as the more nuanced variables. We created Commerce.js so businesses can control their brand at the checkout.
Credit to Visualise Value
Why doesn’t everyone have a custom checkout?
Monolithic solutions focus heavily on sub second page loads or a new creative product display as areas of your eCommerce to experiment and optomize. But they never talk about the checkout.
The true limitations that monolithic platforms (Shopify, Magento, BigCommerce) impose, are tied to their non API-first approach. Many of these monolithic platforms make it difficult (or impossible) to experiment at the checkout, and so naturally don’t talk about optimizing it.
So it's highly likely your competitors, dubious merchants, and Alibaba drop-shippers are using the exact same checkout as you.
Instead of thinking down, and optimizing in the wrong places, we're helping businesses think and innovate up, into the checkout (and beyond).
Checkouts were complex
Traditionally, checkouts have been complex to build and work with. Anyone who has developed with Magento or built a custom checkout page, knows how one boolean change made by a customer can have a domino effect throughout the checkout, and change / break everything.
From the cart conditionals that are triggered to show in the checkout, to the validation issues when customers make edge case changes, this all gets very complex, very fast. Without the right developer tools or experience to navigate the checkout, it’s just easier to stay away. Even with the many headless eCommerce platforms emerging, the checkout concept has been completely skipped.
On the monolith, you create a cart, and then you create an order.
Monolithic platforms like Shopify and Squarespace lock off the checkout, making it near impossible to customize other than adding your logo or changing a few styles.
The checkout's complex nature, paired with the walled/silo’d environments that stifle personlization, have created an ocean of stale purchasing experiences.
Checkouts are easy with Commerce.js
With better developer tooling at the checkout, we're giving brands an edge over everyone else.
In Part 2 I'll explain our approach to the checkout, and how our checkout API helps the developer quickly build and experiment at the checkout.
Build a custom checkout
It's free for developers to build checkouts and process test orders. Make a start with: