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

• Developer sandbox (opens in a new tab)
• Node v10 and later
• NPM v3 and later
• Unix-based OS (opens in a new tab) (Linux or Mac OS X)

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

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

• Open Checkout GitHub Repo (opens in a new tab)
• Installing Custom Checkouts
• File Access (WebDav) (opens in a new tab)

Additional resources

• Fork a repo (opens in a new tab) (docs.github.com)