Break free from your templated checkout

7 min read
by Devan Koshal
September 16, 2020

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:

  1. Records relevant shipping and customer information for the order
  2. Enables deeper customer engagement like upsells or memberships
  3. Collects payment from customers
  4. 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. payment 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. hosted 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. custom commerce.js checkouts

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… Shopify checkouts look the same

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 your checkout comes down to your demographic, customer persona, and many other variables. We created Commerce.js so brands can take back control of their brand at the checkout.

VV brand 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. And never 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 innovate up and 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 before knows how one boolean change made by a customer can have a domino effect throughout the checkout and change 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 do this it’s just easier to stay away from. Even with the many headless eCommerce platforms emerging, the checkout concept has been completely skipped. You create a cart, and then you create an order.

Monolithic platforms such as Shopify and Squarespace lock off the checkout, making it near impossible to customize other than adding your logo or changing a few styles.

The complexity behind checkouts combined with walled/silo’d environments has resulted in an ocean full of stale checkouts and purchasing experiences.

Checkouts are easy with Commerce.js

With our easy to use JavaSctipt SDK we've made customizing a checkout fast and fun for developers. We handle the backend logic, you customize what the customer sees.

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:

You might also like