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 (also known as Optimized One-Page Checkout).

Prerequisites

• Developer sandbox
• Node v10 and later
• NPM v3 and later
• Unix-based OS (Linux or Mac OS X)

Fork and install checkout-js

Fork and clone checkout-js; 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. Log in to your BigCommerce developer sandbox, and navigate to Advanced Settings > Checkout.
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
• Installing Custom Checkouts
• File Access (WebDav)

Additional resources

• Fork a repo (docs.github.com)