How Bolt Built an Internet-Wide Checkout UX

Despite over two decades of innovation in ecommerce, online checkout has remained a stubbornly high-friction experience.

Online retailers work hard to get their customers. But when those customers are ready to buy, the checkout process takes over 1 minute on average. It’s especially choppy on mobile, where now more than half of customer shopping sessions take place.

Often, long checkouts are intended to collect signals that help businesses protect against fraud. But, in the process, businesses deliver a sub-par UX to customers and substantially reduce conversion on their sites. Customers are tasked them with filling out unnecessary fields like billing address, scrolling through unoptimized flows, and waiting for slow-loading pages with several redirects.

The numbers show how bad a poor checkout UX can be for business: Nearly 70% of customers abandon their purchase after adding items to their cart. Carts abandoned due to poor UX constitute over $1 trillion in lost sales each year.

At Bolt, we set out to fix that.

What is Bolt?

Bolt is perfecting ecommerce checkout. Our goal is to build the best buying experience, internet-wide, for both businesses and their customers.

Bolt Checkout has two parts: The first is a Guest Checkout experience that eliminates a lot of the extraneous fields (such as billing address) that are typically required for checkout. With no redirects, and with 4 fewer fields and 8 fewer clicks than the average guest checkout, Bolt’s Guest Checkout makes sure nothing gets in the way for customers who are ready to buy.

The second part is a 1-click checkout experience for return customers. Once a shopper has purchased on any Bolt site, they can opt-in to save their payment credentials in a Bolt account. From there, they can check out with a single click on any site powered by Bolt.

Our Engineering team built Bolt Checkout to improve the shopping experience for customers, but also to fix some of the biggest challenges ecommerce businesses face when it comes to checkout and payments. Bolt comes with payment processing, full PCI compliance, mobile optimization, and 100% fraud protection built in. For online retailers, that means providing a world-class checkout experience while cutting a lot of the operational overhead and technical debt that went into maintaining several different payments tools and doing manual order review.

Why Bolt Built a “Headless” Checkout

To create a truly universal standard for checkout, Bolt’s checkout UX needs to stand independently of the back-end systems that an online retailer is using. “Headless” checkout means our checkout UI is decoupled from the back-end checkout, payments, and fraud detection logic. Decoupling UI from backend logic allows us to deliver a consistent and seamless buying experience across all sites powered by Bolt, even if the platforms and systems used by those sites are different.

This can get tricky: Checkout is the central nervous system of an ecommerce website. It’s where customers finalize their purchase, where discount codes and promos are applied, where shipping and tax are calculated, and where fraud protection and fulfillment processes are kicked off.

To ensure all those connections work across platforms, our team uses the APIs that shopping cart platforms and other systems provide. That’s where BigCommerce comes in.

Working with BigCommerce

We’re proud to work with the BigCommerce team on making world-class checkout internet-wide.

Last September, BigCommerce’s Checkout SDK allowed us to make Bolt available for all retailers using the BigCommerce platform. Since then, we’ve had great results with a number of BigCommerce retailers. Watches.com increased revenue 22% using Bolt on their BigCommerce site. Kettlebell Kings, one of our first partners during the launch of the checkout SDK, increased average order value by $100 after switching to Bolt.

We’re excited to extend our partnership with BigCommerce to WordPress. By hooking into BigCommerce for WordPress, we’re one step closer to making Bolt Checkout internet-wide.

How We Built It

Bolt Checkout works as an iFrame modal that appears over the cart page. We pre-load Bolt when a customer hits the cart page. That — and a ton of other optimizations — contribute to a sub-1 second load time on average. When a customer is ready to buy, they can navigate through Bolt’s checkout UI with no redirects or page loads, cutting the checkout time in half.

As the checkout and payments provider, we built logic to allow Bolt Checkout to communicate with WordPress’s cart page UI and with BigCommerce’s back-end (e.g., for shipping options and order management) and order management.

Here’s how:

1. Hooking into BigCommerce for WordPress on the cart page.

Wordpress provides filter hooks and action hooks as a mechanism to build plug-in logic. Luckily, BigCommerce for WordPress follows this pattern, so it’s very easy to hook into its logic.

For instance, BigCommerce for WordPress provides a filter for every template, making it easy to customize any template. In our case, we override the cart page to inject our Bolt Checkout button:

add_filter(‘bigcommerce/template=components/cart/cart-footer.php/data’,
array($this,‘change_bigcommerce_cart_footer_template’), 10, 1 );

By modifying the template, the Bolt Checkout button now shows up on the cart page.

2. Implementing checkout logic.

Since Bolt provides full-stack checkout experience, we need to implement logic to support checkout flow, including discount code, shipping option and tax.

Fortunately, it’s pretty straightforward thanks to BigCommerce’s server-to-server checkout APIs.

For instance, in order to get shipping option and tax information, we can do:

//add customer address to checkout and get all available shipping options by one request

BCClient::createResource(“/v3/checkouts/{$checkout_id}/consignments?include=consignments.available_shipping_options”, $consignment )

Once a user finalizes their checkout details, converting the checkout to an order can also be done with one API call:

BCClient::createResource( “/v3/checkouts/{$checkout_id}/orders” );

From there, the order is registered in BigCommerce’s back-end, making for easy order management, reconciliation, and reporting.

3. Exception monitoring on external servers.

When developing plugins that run on an external server, checking the exception log is challenging.

Bolt has plug-ins for a number of platforms, including WooCommerce, Magento 1, Magento 2, PrestaShop, and Drupal. As we’ve monitored exceptions across all these plug-ins, we’ve found bugsnag to be valuable tool for tracking exception with all relevant metadata.

Every minute a checkout is down means lost revenue. So we place the ultimate importance on stability. Bolt has 99.999% uptime over the past year, and we maintain that record by constantly monitoring reports based on severity and trends.

4. Embracing open source.

Throughout the development process, we’ve been encouraged by the community developing for BigCommerce for WordPress.

Vitaly, from our team, took an especially active role in reporting bugs and helping to move forward the new process. (You can see some of the discussion on the Github forums here.)

We’re committed to the open-source community, and we’re also working on making our plug-in open source for the broader BigCommerce for WordPress developer community. You can find our plug-in on GitHub here: https://github.com/BoltApp/bolt-bigcommerce-wordpress

Conclusion

Using a “headless” approach helps us build experiences that are consistent across platforms. It allows the customer experience to remain seamless and standardized, even as our platform is flexible enough to tie into multiple different platforms and architectures.

Of course, the approach comes with its own challenges, particularly in maintaining plug-ins across a number of platforms.

Here’s a few ways we learned to make that approach easier:

• Use bugsnag to monitor exceptions on external servers
• Tap into the open-source community to catch bugs and iterate earlier on
• If possible, dedicate a team to maintaining your plug-in codebase to ensure it stays up-to-date as APIs update

We’re excited to continue making seamless buying truly internet-wide. You can find our Bolt Checkout for BigCommerce plugin here, and keep track of our progress at bolt.com!