StorefrontStencilThemesTemplates

Installing a Custom Order Confirmation Page

You can engage with your customers after purchase with a custom order confirmation page even if you are not using a custom checkout. This article outlines how to package a custom order confirmation file, and install a custom confirmation file via the control panel. The installation process is the same as Installing a Custom Checkout, except you will modify a different file in Open Source Checkout.

Generate the JavaScript loader file

Generating a loader file is the first step in installing a custom order confirmation page. If you are creating a custom checkout and a custom order confirmation page using checkout-js, the generated loader file is the same for both. However, you can install a custom order confirmation page and still use the default checkout.

The loader file must be responsible for the following:

  • Loading all the required assets, including CSS files
  • Running the app

Packaging custom order confirmation page with Open Source Checkout

If using Open Source Checkout, you can generate the loader file by following these steps:

  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.

You can deploy and install the custom confirmation page when using Open Source Checkout to view changes and test implementations through the UI.

Properties available on the custom order confirmation page

When a store uses a custom confirmation page, the following 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.

To use the data exposed in the window object, include relevant code in your loader file. The following is an example of the relevant code:

Include code in loader file
ReactDOM.render(
  <OrderConfirmation orderId={ window.checkoutConfig.orderId } />,
  document.getElementById(window.checkoutConfig.containerId)
);

Hosting a custom order confirmation page

You will need to host the custom confirmation file online so it can be served by the store using an external hosting service. Using an external host will allow you the freedom to automate the build process if you wish and push updates automatically from your local machine.

Using WebDAV to host a custom order confirmation page

You can upload a custom order confirmation page to your store’s server using WebDAV. The instructions to upload the /dist folder to the BigCommerce server using WebDav are below:

  1. Before proceeding, ensure you have downloaded Cyberduck, our recommended WebDAV client.
  2. From your store control panel, navigate to Server Settings > File Access (WebDAV).
  1. From Cyberduck, enter the /content folder and create a new folder named OrderConfirmation.
  2. Navigate into the /dist folder in your OrderConfirmation project.
  3. Copy the contents of the /dist folder and paste it into the OrderConfirmation folder.

For more information on how to use Cyberduck, refer to the File Access (WebDAV) page.

Installing a custom order confirmation page

You can install a custom checkout on a store in the following two ways:

Install using the control panel

To install a custom order confirmation page on a store, follow these steps:

  1. Navigate to Advanced Settings > Checkout in your store’s control panel.

  2. Under Custom Order Confirmation, type the following in the Script URL field, replacing version with the latest version number generated by running the npm run release:alpha command:

webdav:checkout/auto-loader-<version>.js

order-confirmation-page

  • 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.
  1. Click the Save button at the bottom of the page.
  2. Navigate to your live storefront to view your new custom order confirmation page.

Install using the V3 Checkout API

To install a custom checkout on a store, use the Update Checkout Settings endpoint to install the loader file.

Implementing localization

You can customize your checkout page and customer order confirmation page to display in any one language of your choice. To localize your checkout, download and extract your Stencil theme. Navigate to the /lang subfolder, which includes the en.json English language file. Create a new translation file (i.e., es.json) and copy the content of the translation file across from checkout.js into Cornerstone. Use {{lang checkout.my-string}} or {{lang order-confirmation.my-string}} and enter the key-value pairs. The example below shows English and Spanish strings.

In en.json, add checkout key and corresponding information for the value.

"checkout": {
        "title": "Checkout"
    }

In es.json, add the same checkout key and the Spanish translation of the value.

"checkout": {
        "title": "Pago"
    }

For more details on how to add translation keys to a language file, see the Localization Tutorial.

Articles