BigCommerce Inject Order Details on the Order Confirmation page

Adding additional variables to the order confirmation page.

I've edited the en.json to customize the messages shown to the customer on the order confirmation page. However, I would like to show some additional information to the customer, specifically their own email address. We have way too many customers that call and complain they didn't get any email confirmations or tracking numbers and it's almost always due to them mistyping their email address. I have tried every manner of placeholder in the language file to invoke the customer's email from the order and they are all 'undefined'. Is there a way to inject this somehow on the page either via the language file or by editing the order confirmation template?

It is a common request to add Order Details to the BigCommerce Order Confirmation page. I have created a public gist with the code needed inject any order information into the page.

By following the Storefront API guide to query an order, we have created the following script to add Billing Info to the order confirmation page.

<script>
    // https://developer.bigcommerce.com/docs/rest-storefront/orders#get-order
    fetch("/api/storefront/order/{{checkout.order.id}}", {
      credentials: "include",
    })
      .then(function (response) {
        // The API call was successful! Do something 
        return response.json();
      })
      .then(function (orderDetails) {
        // uncomment for local testing to log the order details to the console
        // console.log(orderDetails);
        // wait for .orderConfirmation-section to load, then add custom divs
        var interval = setInterval(function() {
          if (document.querySelector(".orderConfirmation-section")) {
            clearInterval(interval);
            addBillingInfo(orderDetails);
          }
        }, 100);
      })
      .catch((error) => {
      });

      function addBillingInfo(orderDetails) {
        var orderDetailsNode = document.createElement("div");
            orderDetailsNode.innerHTML = `
                <h4>Billing Info</h4>
                ${orderDetails.billingAddress.email}<br />
                <address>${orderDetails.billingAddress.firstName} ${orderDetails.billingAddress.lastName}<br />
                ${orderDetails.billingAddress.address1}<br />
                ${orderDetails.billingAddress.address2}<br />
                ${orderDetails.billingAddress.city}, ${orderDetails.billingAddress.stateOrProvince} ${orderDetails.billingAddress.postalCode}</address>
            `;
            document.querySelector(".orderConfirmation-section").appendChild(orderDetailsNode);
        }
  </script>