Show Order Number in Order Confirmation

Help your website visitors see their Webflow order number straight after checkout.

Animated Drawing of FlowBuddy Scripts Show Order Number for Webflow

why you need it

Automated Sitemap

Webflow doesn’t always display order numbers on confirmation pages, which can frustrate customers and affect trust in the checkout process.

FlowBuddy Scripts fixes this by seamlessly integrating with your site to retrieve and display order numbers automatically—no extra effort needed.

Our script automatically fetches the order number generated during the checkout process and ensures it is displayed prominently on the order confirmation page. This provides customers with immediate reassurance and a reference point for their purchase.

This improves transparency and customer confidence, making it easier to track orders and contact support. With FlowBuddy Scripts, you create a smoother, more professional checkout experience.

Installation

LIVE EXAMPLE

Check out the live example

Take look at how a publish date would look like on your page - https://www.onpointgroundworks.co.uk/information/privacy-policy

Take look at how a publish date would look like on your page

INSTALLATION

Check out the installation process.

Don’t hesitate to reach out if you have any questions.

THE CODE

Javascript

1<!-- JAVASCRIPT ORDER NUMBER -->
2document.addEventListener("DOMContentLoaded", function() {
3    // Get the current URL
4    var url = window.location.href;
5
6    // Extract the orderId value from the URL
7    var match = url.match(/orderId=([^&]*)/);
8    var orderId = match ? match[1] : null; // Check if match is found
9
10    // Change the text within the element with ID "ORDER_NUMBER"
11    if (orderId) {
12        var orderNumberElement = document.getElementById("ORDER_NUMBER");
13        if (orderNumberElement) {
14            orderNumberElement.textContent = orderId;
15        }
16    }
17});
18</script>
19<!-- END JAVASCRIPT ORDER NUMBER -->

javascript

jQuery

1<!-- JQUERY ORDER NUMBER -->
2<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3<script>
4        $(document).ready(function() {
5            // Get the current URL
6            var url = window.location.href;
7
8            // Extract the orderId value from the URL
9            var orderId = url.match(/orderId=([^&]*)/)[1];
10
11            // Change the text within the element with ID "ORDER_NUMBER"
12            $('#ORDER_NUMBER').text(orderId);
13        });
14</script>
15<!-- END JQUERY ORDER NUMBER -->