> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Installing an Open Source Checkout

You can create unique shopping experiences that fit the look and feel of a store's brand using custom checkouts. This article outlines how to package a custom checkout file and install a custom checkout using the control panel.

This article will address using both [Open Source Checkout](https://github.com/bigcommerce/checkout-js) and [Checkout SDK](https://github.com/bigcommerce/checkout-sdk-js) powered checkouts.

## Obtaining the JavaScript loader file

Custom checkouts must have a single JS loader file. The first step to using a custom checkout is generating this file. The loader file is responsible for the following:

* Loading all the required assets, including all CSS files, no matter the location
* Running the app

## Developing a custom checkout

If you wish to customize the style sheets, enter your CSS into the [optimized-checkout.scss](https://github.com/bigcommerce/cornerstone/blob/master/assets/scss/optimized-checkout.scss) in Cornerstone or the [scss folder](https://github.com/bigcommerce/checkout-js/tree/master/packages/core/src/scss) in checkout.js. We suggest moving content from "optimized-checkout.scss" to the scss folder or vice versa to ensure a single source of truth for handling styles.

> **Note**
>
> Note: "optimized-checkout.scss" will always override the CSS rules defined in checkout-js.

In order to build from the source code, you must have the following set up in your development environment.

* Node >= v22.x
* NPM >= v10.x
* Unix-based operating system

### Packaging custom checkouts with Open Source Checkout

If using [Open Source Checkout](https://github.com/bigcommerce/checkout-js), you can generate the loader file by following these steps:

1. Fork and clone [checkout-js](https://github.com/bigcommerce/checkout-js); then, install dependencies.

```bash showLineNumbers={false}
# Clone the repo
git clone https://github.com/bigcommerce/checkout-js

# Install dependencies
cd checkout-js
npm ci
```

2. (Optional) Start webpack in watch mode and launch the dev server.

If you are developing the application locally, you can build the source code in watch mode and test your checkout implementation.

```bash showLineNumbers={false}
npm run dev & npm run dev:server
```

> **Note**
>
> * Open your browser and navigate to `http://127.0.0.1:8080/` to confirm the dev server is running. You should see content from the `/build` folder.
> * Enter the local URL for `auto-loader-dev.js` in **Checkout Settings** > **Custom Checkout** > **Script URL**. (e.g., `http://127.0.0.1:8080/auto-loader-dev.js`)

3. After you have made changes to the source code, run the following command to build it.

```bash showLineNumbers={false}
  npm run build
```

This creates a `/dist` folder that contains the loader file (e.g., `auto-loader-1.564.0.js`). You will then need to host the `/dist` folder and enter the URL to the loader file in **Checkout Settings** > **Custom Checkout** > **Script URL**.

### Configuring to comply with PCI DSS 4.0

If you need to make your custom checkout PCI 4.0 compliant, follow the steps outlined in the [PCI-specific setup guide](/developer/docs/admin/checkout-and-cart/open-checkout).

## Hosting a custom checkout

You'll need to host the custom checkout file online so the store can serve it. You can use a hosting service, such as [Amazon S3](https://aws.amazon.com/s3/). Using an external host gives you the freedom to automate the build process if you wish and push updates automatically from your local machine. Or you can host it on your store using WebDAV.

The steps to host a custom checkout on BigCommerce are below:

1. Use WebDAV to upload a custom checkout. For details, see [Use WebDAV](https://support.bigcommerce.com/s/article/File-Access-WebDAV) to upload the checkout-loader.js file.
2. Install custom checkout using the [control panel](https://support.bigcommerce.com/s/blog-article/aAn4O000000CdFGSA0/installing-custom-checkouts-in-the-control-panel) or use the [Update Checkout Settings](/developer/api-reference/rest/admin/management/checkouts/settings/update-checkout-settings) endpoint to install the loader file.

## Related resources

### Articles

* [Checkout SDK](/developer/docs/admin/checkout-and-cart/checkout-sdk)
* [Checkout SDK Tutorial](/developer/docs/admin/checkout-and-cart/checkout-sdk/tutorial)
* [Configuring Open Checkout to comply with PCI DSS 4.0 Section 6.4.3](/developer/docs/admin/checkout-and-cart/open-checkout)
* [File Access (WebDAV)](https://support.bigcommerce.com/s/article/File-Access-WebDAV)
* [Installing Custom Checkouts in the Control Panel](https://support.bigcommerce.com/s/blog-article/aAn4O000000CdFGSA0/installing-custom-checkouts-in-the-control-panel)