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 https://www.checkfront.com/support/docs/manage/ecommerce
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
http://www.example.com/thankyou/?booking_id={$BOOKING_ID}&total={$BOOKING_TOTAL}
http://www.example.com/thankyou/?booking_id=UHXE-20120303&total=119.00&item1:9
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("<br>");
document.write("Booking Total:: "+total);
document.write("<br>");
document.write("Booking SKU with booking Quantity:: "+sku);
document.write("<br>");
document.write("Booking Date:: "+date);
</script>
If you want to see this in action, simply make a test booking at https://poplarbb.checkfront.co.uk/reserve
Sign In or Register to comment.