Customizable Order Confirmation Pages in BigCommerce

The latest BigCommerce update adds customizable order confirmation pages to the checkout process.

Shoppers appreciate personalized experiences and the latest update to the BigCommerce platform now includes the ability to fully customize the order confirmation page. Users can add such enhancements as custom styling and text, subscription payment details, delivery and address info, and loyalty program enrollment to further enrich the personalized shopping experience for their customers.

The new custom order confirmation page can be installed through the Control Panel as an alternative to the standard page. Developers can now access additional information to the checkout confirmation page that isn’t typically available on the standard checkout confirmation page.

Prior to the system update, BigCommerce stores could use the Open Source Checkout (launched in November of 2020) to create customized checkout pages but it is not necessary when creating a custom order confirmation page. Stores can still interact with customers post-checkout with a custom order confirmation page without creating an all-new custom checkout experience.

How to Install a Custom Order Confirmation Page in BigCommerce

The process to install a custom order confirmation page is virtually identical to installing a custom checkout (see the related article in BigCommerce’s Dev Center). The only difference is that you will be modifying a different file in Open Source Checkout.

#1: Generate the JavaScript Loader File

This is the first step in installing your custom order confirmation page. If you are using checkout-js to create a custom checkout and a custom order confirmation page, the generated loader file will be the same for both but you can still use the default checkout with the custom order confirmation page.

The loader file is responsible for loading all required assets (including CSS files) and running the app.

Use Open Source Checkout to Package the Custom Order Confirmation Page

If using Open Source Checkout, follow these two steps to generate the loader file:

1. Navigate and locate the Open Source Checkout folder using the terminal, and run npm ci to download dependencies.
2. Run npm run build to generate a /dist/ folder with all the files.

Open Source Checkout enables you to deploy and install custom confirmation pages to see changes and test implementations directly from the UI.

Available Properties on the Custom Order Confirmation Page

For stores using a custom confirmation page, these properties are attached to the window.checkoutConfig object on the checkout page:

• containerId: ID of the HTML component where you load the checkout app.
• orderId: The generated order ID.
• publicPath: If present, the public URL of the custom checkout file’s directory.

Include the following code in the loader file:

ReactDOM.render( , document.getElementById(window.checkoutConfig.containerId) );

#2: Hosting a Custom Order Confirmation Page

The custom order confirmation file will need to be hosted online so that it can be served by the store. An external hosting service will be needed and will allow you to automate the build process if you choose to automatically push updates from your local machine.

Using WebDAV to Host a Custom Order Confirmation Page

How to upload the /dist folder to the BigCommerce server with WebDAV:

1. Download CyberDuck, BigCommerce’s recommended WebDAV client.
2. From the store control panel, go to Server Settings > File Access (WebDAV).
3. From Cyberduck, enter the /content folder and create a new folder named OrderConfirmation.
4. Navigate into the /dist folder in your OrderConfirmation project.
5. Copy the contents of the /dist folder and paste it into the OrderConfirmation folder.

#3: Install Your Custom Order Confirmation Page

To install using the control panel:

1. From the store control panel, go to Advanced Settings > Checkout.
2. Under Custom Order Confirmation, type the following in the Script URL field, replacing with the latest version number generated by running the npm run release:alpha command:
   webdav:checkout/auto-loader-<version>.js
3. Click Save the bottom of the page.
4. View your new custom order confirmation page on your live storefront.

NOTES:

• Prepending webdav: Indicates that the URL is in the remote WebDAV directory. It will treat /content as the root WebDAV directory.
• It is important to include <version> number in the Script URL field. Because if you make changes to the same provided loader filename, you could serve a cached version to the user.
• If you previously created a custom checkout, use the same Script URL. You may need to enter the Script URL again.

To install using the V3 Checkout API, use the Update Checkout Settings (redirect to BigCommerce Dev Center article) endpoint to install the loader file.

Diztinct is an official design partner with BigCommerce. If you’d like to learn more about our custom BigCommerce design services and additional web development solutions, get in touch with us today and get ready to make your website work for you.