Docs
Storefront
Cart and checkout
Custom checkouts

Checkout Customizability

BigCommerce provides significant levels of checkout customizability. If you just want to modify the theme by overriding the style of BigCommerce’s Optimized One-Page Checkout, please see Restyle Optimized One-Page Checkout. However, if you want to build a custom checkout, there are two paths that a developer can choose to use.

The first path is to render the checkout on the BigCommerce storefront. With the storefront suite of APIs and SDKs, BigCommerce as a platform maintains responsibility for managing shopper sessions using cookies and all our standard mechanisms.

The second path is to render the checkout experience outside of the BigCommerce storefront. The Management APIs are for consumption by other servers on the internet, which in turn are responsible for session management, whether that's a website running on a CMS or a native mobile app.

Once a developer has chosen a path, they can choose the options they want to use to build the custom checkout. The table below provides an overview of the different options available to help developers select the one that best suits their needs.

Checkout options

What is it?When should I use it?Where do I find it?
Open CheckoutOpen checkout is the open-source option of BigCommerce's Optimized One-Page Checkout.

A browser-based application that converts a cart to an order, allowing shoppers to complete checkout.

Our reference implementation of checkout built on top of the Checkout JS SDK.
This option allows developers to create a custom checkout from a fully functional foundation (as a starting point for their efforts or even contribute to it).

Add features or make moderate-sized changes to BigCommerce’s checkout (hosted on the BigCommerce storefront).
Open Checkout Quick Start
Checkout JS SDKA client-side vanilla JavaScript library that is a wrapper for the Storefront Checkout API.

The SDK handles all the API calls necessary to move shoppers through the checkout experience. From customer login, fetching shipping quotes, and payment methods through to paying an order.
This option allows developers to build a custom checkout from scratch by creating a presentation layer for checkout. Completely replacing the UI/UX without having to do the heavy lifting of dealing with Storefront API endpoints.

Significant front-end customizations and/or feature additions to checkout (hosted on the BigCommerce storefront).

Limitations:
  • SDK does not let you introduce new behavior. While you can filter based on shipping methods, you cannot create new shipping methods or payment methods.
  • Hosted forms do not work with Stencil localhost since forms are served over https and Stencil only supports http. Developers must test the order confirmation flow on Stencil using offline payment methods.
Checkout SDK
GraphQL Storefront APIThe GraphQL Storefront API can create and update a checkout and convert it to an order.

This option allows developers to build a custom checkout experience inside or outside the context of a BigCommerce storefront session by accessing raw API request/response data.

This is the API that typically powers headless storefronts.
GraphQL Storefront API: Carts and checkout

GraphQL Storefront API reference
REST Storefront APIThe REST Storefront API can get and update many aspects of a checkout.

This option allows developers to build a custom checkout experience within the context of a BigCommerce storefront session by accessing raw API request/response data.

This is the API you would typically access from your browser using JavaScript to retrieve checkout data not available through the SDK.
REST Storefront API checkout reference

REST Storefront API: Carts and checkout
REST Management API checkout featureThe REST Management API creates and updates a checkout and converts it to an order.This option allows developers to build a custom checkout outside of a BigCommerce storefront session and use the Payments API to pay for an order.

When used with the REST Management carts feature, it lets you make modifications similar to those performed using the control panel option Orders > Add. These modifications include the ability to create custom products, modify prices, add custom discounts, set custom prices for shipping, etc.

These are the APIs that will power your headless checkout solutions on channels such as:
  • Content management systems
  • Native mobile apps (non-web view)
  • Internet of Things (IoT) devices
  • Recurring order and/or subscription apps (e.g. OrderGroove)

Note: Currently, this API currently does not support using store credit or gift certificates as payment methods.
REST Management API checkout reference

REST APIs: Carts and checkout

Resources

Related articles

Did you find what you were looking for?