Using a custom receipt URL to create a custom receipt page.

IanIan Checkfront
edited May 2016 in Support Tutorials
In your ecommerce settings it is possible to direct your customers to a custom receipt page and display their booking information by parsing the URL as outlined in our ecommerce support page at
As outlined in the support documentation it is possible to use non-identifiable information in the URL such as 
{$BOOKING_ID} Booking ID (eg UHXE-492058)
{$BOOKING_TOTAL} Total value of the booking
{$BOOKING_SKU} A comma-separated list of items SKUs and order quantities in the booking (e.g: item1:3,item2:1).
{$BOOKING_DATE} Start date of the booking{$BOOKING_ID}&total={$BOOKING_TOTAL}
Here is a screenshot to show how a basic webpage could look: Custom receipt page To do this, it requires a bit of javascript so it would help to have a good understanding of HTML/CSS/JS. There are plenty of resources on the internet that will help you to designing a great looking custom receipt page. To start customizing your receipt page, feel free to use this basic javascript code that is used on the screenshot above:
<script type="text/javascript">
var getQueryString = function ( field, url ) {
var href = url ? url : window.location.href;
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
var string = reg.exec(href);
return string ? string[1] : null;
var booking_id = getQueryString('booking_id');
var total = getQueryString('total');
var sku = getQueryString('sku');
var sku = decodeURIComponent(sku);
var date = getQueryString('date');
document.write("Booking ID:: "+booking_id);
document.write("Booking Total:: "+total);
document.write("Booking SKU with booking Quantity:: "+sku);
document.write("Booking Date:: "+date);
If you want to see this in action, simply make a test booking at
Sign In or Register to comment.