BigCommerce Checkout is Now Open Source
What is Open Checkout
TL;DR
Open Checkout is the BigCommerce optimized one-page checkout experience. This is the entire frontend application code that makes up the BigCommerce checkout experience now open sourced for general use.
Ready to know more?
In late 2018, we released the Checkout SDK as open-source code. The feedback received was that using the SDK alone was too time-consuming and complicated. Open Checkout alleviates both of these issues. You can see the SDK methods in action and have a fully functioning checkout page; allowing you to extend the functionality in a fraction of the time.
Fork the Repository and Set Up the Application
To get started with Open Checkout, you will need to fork the repository from GitHub. If you are like me, you always fork first — but don’t forget to review the READ.ME for helpful information and links to set up configuration. As well, create your upstream to BigCommerce/Checkout.js so that you can pull any changes to our master repository, enabling you to get the latest version whenever you are ready to update.
The highlight reel of what you need:
- Node greater than version 10.
- NPM greater than version 3.
- NVM (Node Version Manager) is helpful for managing node and npm.
Setup your local environment
Clone your fork locally and open it up in your editor. I use VS code but you can use any editor that you prefer. To start working locally use the following steps:
- Open a terminal.
- Enter the command(s) `npm install && npm ci` to install all the packages needed for the project.
- After that is complete, split the terminal and on one side enter `npm run dev` and the other side enter `npm run dev:server` to start the application locally.
- Using your local server address, produced by npm run dev:server, navigate to your BigCommerce test store and enter that local address in the Control Panel under Advanced Settings -> Checkout and enable Custom Checkout.
- Enter the url for your locally hosted auto-loader-dev.js file from /build/ directory and you are ready to start local development.
Disclaimers
There are some things you need to know about Open Checkout before you commit to using it.
- You are held to the standards set forth in our Terms of Use; therefore some changes to the checkout page result in you taking liability for PCI compliance.
- You will be responsible for keeping your code up to date with the latest releases from BigCommerce. ( Hint: use the upstream noted above )
- You are also required to host your checkout page.
This is not for the faint of heart. If you are ready and willing to execute on the above, let’s look at what we can do with a custom checkout experience.
Customized and Extended Checkout Experiences
What comes with Open Checkout?
Out of the box, you have a fully functional checkout page. This React JS application is our BigCommerce checkout page, complete with the PCI compliance and security features you would expect. While you are liable for maintaining the PCI compliance, those features are embedded in this source code.
You have access to the BigCommerce API, Checkout SDK, payment gateways, and stylesheets. Using this as the base of your development will make it dramatically easier to extend and build upon.
Extend the base code
In order to extend the code base, you should know the main directory structure. The following screenshot displays the main directory structure. You will mainly work with the src directory.
~/source/checkout-js on master [✘!?] is 📦 v1.82.2 via ⬢ v10.16.3
•100% ➜ tree -d -L 1
.
├── build
├── dist
├── node_modules
├── scripts
├── src
└── types
Inside of src is three directories; app, scss, and static. Depending on what you plan to extend or change, you will most likely find it in the app directory.
Which has the following directories:
.
├── app
│ ├── address
│ ├── billing
│ ├── cart
│ ├── checkout
│ ├── common
│ ├── config
│ ├── coupon
│ ├── currency
│ ├── customer
│ ├── embeddedCheckout
│ ├── geography
│ ├── giftCertificate
│ ├── guestSignup
│ ├── locale
│ ├── order
│ ├── orderComments
│ ├── payment
│ ├── privacyPolicy
│ ├── promotion
│ ├── shipping
│ ├── termsConditions
│ └── ui
By navigating to src/app/checkout.tsx you can see the main components rendering the checkout page. I made a small edit to the main <div> that renders content to test.
Now you are ready to begin diving in and editing the checkout page to meet your functionality and styling needs.
What is Possible with Open Checkout?
Are you ready to start making the custom checkout solution of your client’s dreams? Or do you want to create the next big checkout app that hits the marketplace? Either way, as long as you have a good understanding of the BigCommerce APIs and Checkout SDK, you are ready to get started.
What you will be able to do, easier than before, is to create custom checkout experiences with unique styling, localization, and bespoke integrations. Trending use cases are, “buy online and pick up in-store”, customizing shipping experiences like picking up from a shared location or locker, or a specialized currency experience. As well, headless integrations to BigCommerce can use Open Checkout to enhance their sites continuing to use redirected checkout but having that checkout look custom. For enterprises, this means more control over every aspect of the user experience.
The BigCommerce Open SaaS Evolution
What is the Open SaaS user story?
As developers and technical professionals — we all love a good user story, but we hardly see them used for non-technical requirements gathering. At BigCommerce, we say that we are “Open SaaS” but what does that mean to our developer community and what are we delivering on? This is a case where I think a non-technical user story is helpful.
“As a developer, working in the BigCommerce ecosystem, I want tools that support the success of my implementations.”
Open Checkout is one of many tools that can support your implementation of BigCommerce themes, widgets, and apps. This allows us to deliver on making our APIs and SDKs easier to use, yielding greater flexibility for our development community.
This user story focuses on a key part of our Open SaaS vision delivering meaningful tools. We want to deliver to our developer community, Agency, and Technology Partners the best in breed tools; so that you can deliver the best in breed solutions that merchants need. This is why BigCommerce has delivered our checkout experience as open-source code. To give you another tool to support development on the BigCommerce platform.
Big or small, Open Checkout has it all; opportunities are numerous in this space and we can’t wait to see what you develop. Share your solutions with us on Twitter to @BigCommerceDevs and in our BigCommerce Developers Group.
Resources
To find out more about Open Checkout review the following documentation:
- Open Checkout — Checkout-JS Repository
- Knowledge Base Article on Optimized Single Page Checkout
- PCI Compliance
- Headless Development Guide
- Installing Custom Checkout
- The Complete Guide to Checkout Customization on BigCommerce
Connect
Please feel free to touch base with us via the following channels:
