Docs
Storefront
Cart and Checkout
Open Checkout
Tutorial

Open Checkout Tutorial

In this tutorial, we'll configure our development environment and make a code change to a fork of BigCommerce's Checkout JS (opens in a new tab) (also known as Optimized One-Page Checkout (opens in a new tab)).

Prerequisites

We recommend that Windows 10 users use Windows Subsystem for Linux (opens in a new tab).

Fork and install checkout-js

Fork and clone checkout-js (opens in a new tab); then, install dependencies.

# Clone the repo
git clone https://github.com/bigcommerce/checkout-js
 
# Install dependencies
cd checkout-js
npm ci

Start development server

Start webpack in watch mode and launch dev server.

npm run dev & npm run dev:server
  • Open your browser and navigate to http://127.0.0.1:8080/ to confirm the dev server is running (you should see content from build/).
  • To serve files over HTTPS, install an SSL on your development machine, or use ngrok (opens in a new tab).

Configure your sandbox

Next, configure your sandbox to use the files served up by your dev server.

  1. Login to your BigCommerce developer sandbox, and navigate to Advanced Settings > Checkout (opens in a new tab).
  2. Change Checkout Type to Custom Checkout.
  3. Under Custom Checkout Settings, copy and paste http://127.0.0.1:8080/auto-loader-dev.js into Script URL.
  4. Save.

Learn more about installing custom checkouts.

Make a code change

Make a code change and wait a few seconds for webpack to reload the dev server. For example, the code below adds a <div> to the Checkout component defined in src/app/checkout/Checkout.tsx.

class Checkout extends Component<CheckoutProps & WithCheckoutProps & WithLanguageProps, CheckoutState> {
    // ...
    render(): ReactNode {
        // ...
        return <>
            <div className={ classNames({ 'is-embedded': isEmbedded() }) }>
                <div className="layout optimizedCheckout-contentPrimary">
                    <div>Open Checkout Quick Start Example</div>
                    { this.renderContent() }
                </div>
                { errorModal }
            </div>
 
        </>;
    }
}

Resources

Additional resources

Did you find what you were looking for?