Skip to main content
Blog General

Custom Open Source Checkout for BigCommerce

Manojprabhakaran B
August 5, 2021 |
BigCommerce Checkout

BigCommerce checkout edits have been made easier! 

Earlier in BigCommerce, the only way to edit the optimized one-page checkout provided by BigCommerce was to implement checkout SDK, which does not replicate all the features of BigCommerce checkout. With this recent release of open-source checkout, we can edit the exact optimized one-page checkout of BigCommerce.

This blog will let you know how to edit the Checkout page in BigCommerce.

Requirements needed to begin with:

The following are the requirements you should have in your system to check out the feature:

1)First step is to clone the repository from GitHub.

2)The Node Version should be greater than 10.

3)The NPM Version must be greater than 3.

4)The NVM (Node Version Manager) is useful for managing the node and npm.

How to set up your local environment?

Now since you have all the requirements listed above in your system to start with, setting up your local environment is the next step. Precisely follow the given steps below that will guide you to do the perfect local setup.

Clone your fork and start working locally. Use the following steps:

  • To start with, Open your terminal.
  • To install the packages required for the project, you will need to run the following commands in your terminal.

Command : npm install npm ci`

  • Once the package is installed, next you will need to split the terminal into two:

On one side ENTER `npm run dev`On the other side ENTER `npm run dev:server` to start the application locally.

  • The next step is to use your local server address produced by npm run dev:serve. To navigate into the BigCommerce Store, enter that address into the Control Panel under Settings -> Checkout. Go ahead and enable the Custom Checkout.
  • Now, use the local address along with auto-loader-dev.js which is present under /build/ directory. I am attaching the URL here for your reference:

http://127.0.0.1:8080/auto-loader-dev.jsCopy the URL and paste it into the Custom checkout Script in the BigCommerce admin panel. Below is the attached screenshot for you to see how it should look like.Once Saved, you are good to start with your local development.Reference Screenshot: Checkout for BigcommerceLet’s see how to use WebDAV to host a Custom Checkout: Once you complete your local, you can start developing with it.First, you need to pull in the dependencies required for the application using the below command:Command: npm ciYou can make changes to the source code after that and run the following command to build it:Command : npm run buildYou could upload a Custom Checkout to your store’s server using WebDAV. Follow the instructions below to upload the /dist folderto the BigCommerce server using WebDav.1) If you are a user with an operating system other than Linux, you will need to have Cyberduck installed in your system, it’s our recommended WebDAV client. 2)From your store control panel, navigate to Server Settings > File Access (WebDAV).3)Once you connect the WebDAV, the next thing would be to enter  the /content folder and create a new folder named checkout.4) Open the /dist folder from your Checkout Code.5) Your next step is to just copy the /dist folder and paste it into the checkout folder that you have just created above in your WebDAV.

How to install the custom checkout to your store?

You will need to follow the steps given below for the same:

  1. You will need to open the admin panel of your BigCommerce store and navigate to Advanced Settings > Checkout

2)Next you will need to select Checkout Type, go ahead and select Custom Checkouts.3)You will need to enter the following to the Script URL field, replacing it with the latest version number generated by running the npm run release: alpha command:“WebDAV:checkout/auto-loader-.js”Checkout for Bigcommerce4)Once all the steps are completed, click Save.5)You can see the custom checkout changes in your BigCommerce Store and view the Custom Checkout.

Concluding Thoughts

Delivering the best-in-class customer experience is more vital than ever in the eCommerce space. As customer expectation is seeing new heights each day, equipping your eCommerce website with the latest updates and innovations can take you a long way in terms of competitive advantage.To promise a seamless customer experience and to be on top with the latest platform updates, you need the right eCommerce services and solutions. We, at DCKAP, have helped 100+ B2B businesses scale high with our eCommerce services. From upgrading your website with the latest versions to extending maintenance and support, we augment your business to meet customer demands and drive revenue. With digital transformation becoming a necessity, our experts are well-equipped to elevate your business to the next level. Get in touch with our experts to learn more about our eCommerce services and product suite.

Manojprabhakaran B

Manojprabhakaran B works as a Software Engineer at DCKAP. He is currently working on Bigcommerce and as an avid learner, he constantly strives to expand his knowledge base. In his free time, you can find him watching political debates and YouTube to learn new technologies.

More posts by Manojprabhakaran B