Customize Every Pixel: Custom Checkouts Now Available on BigCommerce

BigCommerce is excited to announce the achievement of a major platform milestone: Our Checkout SDK is now generally available.

What is the BigCommerce Checkout SDK?

The Checkout SDK is a JavaScript library that makes it easy to consume the new Checkout APIs.

The Checkout SDK is intended for partners, developers and brands who want to build a custom checkout front-end experience. It allows for developers to create their own UI to move a customer through the checkout process.

The SDK handles all the heavy-lifting such as:

1. Customer login

2. Getting shipping quotes

3. Submitting payment for an order

Beyond general availability of the Checkout SDK, BigCommerce is also proud to announce and showcase multiple customers using a customized checkout via the Checkout SDK and two BigCommerce partners who have built out ready-to-use customized checkout applications.

Examples of The BigCommerce Checkout SDK in Use

The BigCommerce SDK is already in use by a variety of BigCommerce customers. In addition, you can go through our open-source Cornerstone Theme demo store to see the Checkout SDK in use.

This is the Checkout SDK testing environment using BigCommerce’s open-source Cornerstone theme.

Let’s look at a few additional examples.

Yellow Pages

This custom checkout was built by Moustache Republic on the BigCommerce Checkout SDK as part of the Yellow Pages’ digital transformation.

It allows for various custom entries specific to Yellow’s use cases.

“Yellow is going through a complete digital transformation and bringing a whole new set of services online. Like most businesses their size, the company has a complex set of ecommerce requirements that can’t be solved by out-of-the-box solutions,” said Tony Hou, managing director at Moustache Republic.

“As a long-time BigCommerce partner, we knew the BigCommerce platform had the flexibility to accommodate both the customized single sign-on and checkout experiences Yellow desired, without requiring a huge investment. Features like Checkout SDK are just another way the platform allows agencies to customize a SaaS solution for unique business needs.”

Bohemian Traders

This custom checkout was built by Intuit Solutions on the BigCommerce Checkout SDK for Bohemian Traders.

Bohemian Traders was looking for a complete one-page checkout, where all fields are readily visible upon landing on the checkout.

“We worked with BigCommerce partner Intuit Solutions, which puts a skin over the BigCommerce one page checkout and rearranges all of the information,” says David Berlach, CEO of Bohemian Traders.

“Now, there are three columns on the checkout page. There is no scrolling at all. It’s clean and undistracting for the customers. Plus, we can brand it or include up-sells or cross-sells as needed. That’s been working very well.”

Ready-to-use Customized Checkout Apps

Beyond customization for brands, agencies, developers and technology companies now have the ability to build a completely customized checkout on BigCommerce, and then market that solution as a replacement for the BigCommerce checkout on both the BigCommerce App Store and their own marketing material.

This is net new, recurring income opportunity for agencies, developers and technology companies.

Plus, this gives BigCommerce merchants even more control in their desired ecommerce checkout experience, along with the ease of use of a one-click install.

Here are two companies already building additional revenue with BigCommerce’s Checkout SDK.

Bolt

Bolt is a single, intelligent platform that replaces fragmented online shopping, payment, and fraud software. As one of BigCommerce’s preferred partners for checkout, Bolt brings a seamless checkout experience and zero fraud to online retailers, driving double-digit revenue lift.

“With BigCommerce’s Checkout SDK, BigCommerce merchants can now take advantage of Bolt Checkout without investing in additional developer hours, giving them access to Bolt’s hyper-optimized checkout interface and precision fraud detection out of the box,” said Kazuki Nishiura, head of integration engineering at Bolt.

“BigCommerce and Bolt have been working closely on this seamless integration, and we’re excited to bring our track record of 10-50 percent revenue lift to a growing number of retailers.”

According to Bolt, the benefits of their checkout solution including:

• 4 fewer clicks to checkout

• 8 fewer fields to fill out at checkout

• 35-90 seconds faster checkout than the average ecommerce checkout

• 10-50% revenue lift for online retailers.

• Single-click checkout for returning customers

• 0 dev hours integration: Bolt does all the heavy-lifting for BigCommerce retailers

• Industry-leading fraud detection, powered by machine learning and double-checked with human review

• 100% coverage of fraudulent chargebacks including full international risk coverage

• Personalized customer support

BigCommerce customers can begin using Bolt’s checkout now.

Intuit Solutions

Intuit Solutions has long been an agency partner for BigCommerce. Now, they have repurposed their custom checkout development work into a net new app to increase the agency’s recurring revenue.

Bohemian Traders is only one of hundreds of BigCommerce merchants already using the solution.

BulkBookstore is another brand using Intuit Solutions’ One-Page Checkout. 

According to Intuit Solutions, the benefits of their checkout include:

• 7-10% AVG Conversion Increase

• 45 Seconds Average Reduction In Checkout Time

• No Downtime During Installation

• Google Maps API Address Autofill

• 100% PCI Compliant and Secure

BigCommerce customers can begin using Intuit Solutions’ checkout now.

BigCommerce Checkout SDK FAQs

What can I do with the Checkout SDK?

The Checkout JS SDK provides methods for building a checkout page replacement rather than a way to make changes to the existing checkout page. Essentially, you are replacing the built-in Optimized One-Page Checkout with a totally new UI that you design and build yourself.

The SDK provides JavaScript methods for completing the necessary steps of checkout, like displaying and selecting shipping methods, and communicating that information back to the BigCommerce backend.

Here are a variety of customizations you can build:

• Initialize payment and shipping providers that require client-side setup through a common interface. Below are some examples of these providers:

  • PayPal Express

  • Braintree

  • Stripe

  • Square

  • Amazon

  • Klarna

• Provides a JavaScript interface for interacting with the web API.

  • Fetch and submit resources:

    • Cart

    • Order

    • Customer

  • Fetch available options:

    • Shipping addresses

    • Shipping countries

    • Shipping states

    • Billing addresses

    • Billing countries

    • Billing states

    • Shipping methods

    • Payment methods

It is important to note that the Checkout SDK does not allow you to change the underpinnings of the checkout. You must still conform to the model of the Checkout API underpinning the SDK to successfully complete a Checkout and create an order in BigCommerce.

The SDK does not allow you to implement custom payment, shipping, or tax calculation providers into the checkout. Instead, the configured providers for these services on a given store are expressed via our Checkout API.

Where can I get the Checkout SDK?

The Checkout SDK and associated documentation can be downloaded from the BigCommerce SDK Repo.

There, you can find documentation, installation instructions, and take a look at the code. The Checkout SDK is an open source project, so while BigCommerce actively maintains it, you can open a pull request if you’d like to contribute.

Do I have to build my custom checkout in React?

Nope! The library is vanilla JavaScript, so it’s framework-agnostic. You can work in React, Angular, Vue, or even just plain HTML and JavaScript–whichever frontend framework you prefer to build in.

How do I integrate my custom checkout into the template files?

The most common implementation will be to build a custom checkout directly into the checkout.html file, replacing the default {{{ checkout.checkout_content }}}.

Anything else I should know?

The Checkout SDK is only supported with the Optimized One-Page Checkout control panel setting.

What if I need help?

Currently, support is provided based on your plan. Enterprise clients can reach out to their account manager. For other options on customizing the checkout see our developer documentation on the different ways of working with the checkout pages.

Commerce Without Compromise

BigCommerce is dedicated to building an ecommerce platform that allows our customers to build commerce experiences as they intend them. This means that we will continue to focus on building out our developer documentation, access to APIs, launch additional SDKs and more.

In today’s competitive retail environment, it is crucial that brands build customized end-to-end ecommerce experiences that are memorable, unique and effective for their specific audiences. It is our intention to remove any barriers that exist to using best-of-breed technologies, business models or data orchestration flows that force retailers into an opinionated ecommerce build out.

Here is another BigCommerce product launch focused on knocking down those barriers:

• BigCommerce WordPress Integration: Marrying Scalable Content and Commerce

For more information on getting started with the Checkout SDK, please follow this link.