The BigCommerce Order Confirmation Page is Newly Customizable
Customizable order confirmation pages are the latest update to the BigCommerce Checkout process. This means you can now add customizations like custom styling and text, subscription payment details, delivery and address information and loyalty program sign ups to your order confirmation page to create a branded, unique post-checkout experience for shoppers.
What’s New
BigCommerce merchants and partners can now install a custom order confirmation page via the Control Panel to replace the default experience. This unlocks the ability for developers to add additional information to the checkout confirmation page that isn’t normally there by default, like additional branded images or content, links to resources like a store’s shipping & returns policy, etc.
While many BigCommerce stores utilize our Open Source Checkout capabilities to create a custom, bespoke checkout page, it’s not required to create a customized order confirmation page. Stores can still engage with their shoppers after checkout with a customized order confirmation page, without needing to create an entirely custom checkout experience.
Fork the Repository and Set Up the Application
If you’ve installed a custom checkout before, the process for installing a custom order confirmation page is incredibly similar. The only change is that you’ll be modifying a different file in the Open Source Checkout.
To get started with Open Checkout, you will need to fork the repository from GitHub (Pro Tip: don’t forget to review the READ.ME for helpful information and links to set up configuration). Then, 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.
Here’s a highlight reel of what you’ll need:
- Developer sandbox
- Node v10 and later
- NPM v3 and later
- Unix-based OS (Linux or Mac OS X)
Clone the repository onto your computer, run
cd checkout-js in your terminal, and open the folder with your text editor of choice. I use VS Code!
Next, open a terminal and enter the command(s) below to install all the packages needed for the project.
npm install && npm ciAfter that is complete, split the terminal and on one side enter
npm run dev and the other side enter
npm run dev:serverto start the application locally.
Using your local server address, produced by
npm run dev:servernavigate 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.
Generate a Loader File
Now, you need to generate a loader file to load your custom order confirmation page. If you are already using a custom checkout built from checkout-js, the generated loader file is usually same for both the custom checkout and custom order confirmation page. You can install a custom order confirmation page while still using the default checkout. The choice is yours.
Get Katie Hoesley’s stories in your inbox
Join Medium for free to get updates from this writer.
The loader file is responsible for loading all required assets, including CSS files for styling your page, and it is responsible for running the application.
If you’re using the Open Source Checkout, follow these steps to generate a loader file:
- Navigate and locate the Open Source Checkout folder using your terminal, and to download the necessary dependencies, run
npm ci2. To generate a /dist/ folder with all necessary files, run
npm run buildWhat Properties are Available with a Custom Confirmation Page?
If you choose to build and use a custom confirmation page, there are properties available on the window.checkoutConfig object that wouldn’t be otherwise! These properties are:
- containerId: this is the ID of the HTML component where you load the checkout application
- orderId: the ID of the generated order
- publicPath: the public URL of the custom checkout file’s directory, if present
In order to use the data that is exposed on the window object, you’ll need to include the relevant code in your loader file. Here’s an example of what this code could look like:
ReactDOM.render(
<OrderConfirmation containerId={ window.checkoutConfig.containerId } />, document.getElementById(window.checkoutConfig.containerId)
);
Hosting a Custom Order Confirmation Page on WebDAV
When the custom page is ready, you can use WebDAV to upload the custom order confirmation page to your store’s server. To do this, you’ll need to upload the /dist/ folder contents into a folder in your store’s WebDAV. Here’s a full breakdown from our Dev Center of how to do this: Using WebDAV to host a custom order confirmation page
Note: Before moving on to this part of the process, be sure you’ve installed Cyberduck, our recommended WebDAV client.
Installing Your Custom Order Confirmation Page
Once the page content has been uploaded to your store’s server, you’re ready to publish the new page! Below are the steps that will get your custom order confirmation page up and running on your store:
- Navigate to Advanced Settings > Checkout in your Control Panel
2. Under Custom Order Confirmation enter URL to where you’ve hosted the auto-loader file where it says Script URL. In our example below, we’ve hosted it using WebDAV.
3. Click Save at the bottom of the page
4. Go to your live storefront, place a test order, and you should see your new custom order confirmation page.
And that’s it, you did it! You’ve created and installed a custom order confirmation page on your BigCommerce store.
Additional Resources
Want to learn more about creating custom order confirmation pages, and all the other ways you can utilize BigCommerce’s Open Checkout? Find additional details and information in the BigCommerce Dev Center.
Are you using a custom order confirmation page in your BigCommerce store? Let us know in the comments how you’ve taken advantage of this new capability!
