Bigcommerce Custom Checkout Implementation using Open Source Checkout JS

Bigcommerce custom checkout offers significant customization options with the assistance of open-source checkout JS. With this option, you can create your own custom shopping experience that fits your business. This blog explains how to package custom checkout files and install a custom checkout using a control panel.

Custom checkout must have a single js loader file. The first step is to generate the custom checkout single js loader file. And the js loader file is responsible for the below process.

• Loading all the CSS and required assets from the build files.
• Loading the checkout from the js file on the checkout page.

Developing the BigCommerce Custom Checkout from Open-Source Checkout JS

This article uses the Open Source checkout file to develop the custom checkout page. This Checkout JS provides a seamless interface for Bigcommerce customers to complete their checkout process. 

Requirements

To develop the checkout js loader file you must have the below requirement on your development environment.

• Node >= v16.
• NPM >= v8.
• Unix-based operating system. (WSL on Windows)

Steps to Generate the Checkout Loader File

Step 1: Clone the repository to set up the development environment.

# Clone the repository

git clone https://github.com/bigcommerce/checkout-js

cd checkout-js

Step2: Install the dependencies by running the following command

npm ci

Step3: If you are developing the application locally and if you want to build the checkout in watch mode, please run the command

npm run dev

Step 4: To test the checkout application locally run the below command

npm run dev:server

Once the command runs the application will run on the local environment.

Available on:

  http://127.0.0.1:8080

  http://192.168.1.7:8080

  http://192.168.1.6:8080

  http://172.16.6.3:8080

Hit CTRL-C to stop the server

The above command will generate the Js file to run on the checkout on the local URL. The following URL needs to be set up on the Bigcommerce website checkout settings, e.g. http://127.0.0.1:8080/auto-loader-dev.js.

5. Once local testing is completed you can run the below command to generate the checkout js build file.

npm run build

This command will generate the checkout js file auto-loader.js to the production environment.

Hosting the Custom Checkout

Host the checkout build on the online server so that Bigcommerce stores can serve the checkout file. You can use hosting services such as Amazon S3 or other services. Or you can use the service provided by Bigcommerce called Webdav to host the checkout build. Webdav is completely free for Bigcommerce users. And make sure the hosting has the SSL. 

If you are using Webdav then upload the checkout build into the server and add the loader file URL on the checkout settings in the Bigcommerce store. 

Conclusion

Bigcommerce provides seamless support for customizing the checkout and the effective way is to use the Checkout Js. With the help of open-source checkout js, we can have the option to customize the Billing, Shipping, and payment options. Along with this, we have the below options.

• Custom Address Form Fields
• Custom Styles and CSS
• Custom payments

No matter what customization you choose, make sure to check with the developer for your implementations.