Create Digital Customer Sample Receipt using HTML, CSS, and JavaScript

By Faraz - October 23, 2023

Learn to build a digital customer sample receipt using HTML, CSS, and JavaScript. Enhance your customer experience with interactive receipts.

Join us on Telegram

Create Digital Customer Sample Receipt using HTML, CSS, and JavaScript.jpg

Read Also Creating an Interactive Feedback UI HTML, CSS, JavaScript.jpg

Creating an Interactive Feedback UI: HTML, CSS, JavaScript

Digital customer receipts are a crucial part of modern business transactions. In this tutorial, we will guide you through the process of creating a customer sample receipt using HTML, CSS, and JavaScript. Let's enhance your customer experience with interactive and informative digital receipts.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To begin, create the basic structure of our receipt using HTML. Define the necessary elements like headers, item lists, and footers. This sets the foundation for our digital receipt.

Let's break down the code step by step:

1. <!DOCTYPE html>: This line defines the document type and version of HTML being used, which is HTML5.

2. <html lang="en">: This is the opening tag for the HTML document. It sets the language attribute to "en," indicating that the content is in English.

3. <head>: The head section of an HTML document typically contains meta-information about the page and links to external resources. In this case, it includes the following elements:

<meta charset="UTF-8">: Specifies the character encoding for the page as UTF-8, which is a widely used character encoding for handling text in multiple languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag defines how the web page should be displayed on various devices. It ensures that the page is responsive and adjusts to the device's width and initial zoom level.
<title>Customer Sample Receipt</title>: Sets the title of the web page to "Customer Sample Receipt." This title is typically displayed in the browser's tab.
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bangers|Roboto'>: This line links to Google Fonts to load the "Bangers" and "Roboto" fonts for use on the web page.
<link rel="stylesheet" href="styles.css">: This line links an external CSS stylesheet called "styles.css" to apply styles to the HTML content.

4. <body>: The body section contains the actual content of the web page, which is visible to the user. Inside the body, various HTML elements are used to structure the receipt content. Here are the key elements within the body:

<div class="receipt">: This div represents the container for the entire receipt.
<img class="watermark" src="...">: An image element with the class "watermark" and a source (src) attribute pointing to an image file. This is used as a watermark on the receipt.
Several <div> elements with different classes such as "orderNo," "headerSubTitle," "headerTitle," "location," and "date" contain various pieces of information like the order number, event name, location, and date.
<svg id="barcode"></svg>: An empty SVG element with the id "barcode" where a barcode image is generated and inserted dynamically using JavaScript.
Several <div> elements with classes "keepIt" and "keepItBody" provide information about the receipt's purpose and policies.
<hr>: This is an HTML horizontal rule element, creating a horizontal line to separate sections of the receipt.
<div class="items">: This div contains a list of purchased items. Each item is further structured using nested <div> elements with classes like "item," "itemRow," "itemName," "itemPrice," and so on.
More <hr> elements are used to separate sections.
<div class="flex">: This div contains a QR code (identified by "qrcode") and totals for the purchase.
<div class="footer">: The footer section contains information about the estimated time of arrival and the type of print copy (e.g., "customer copy").

5. Finally, the HTML includes JavaScript references at the end using <script> tags to load external JavaScript libraries (JsBarcode and qrcodejs) and a custom script (script.js). These scripts handle the dynamic generation of barcodes and QR codes on the receipt.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Sample Receipt</title>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bangers|Roboto'>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="receipt">
  <img class="watermark" src="https://www.dropbox.com/s/mmf6y9rpibwy9tk/bronyhouse-logo-sm.svg?raw=1">
  <div class="orderNo">
    Order# <span id="Order #">71</span>: <span id="Order Name">Jet Set</span>
  </div>
  <div class="headerSubTitle">
    Thank you for supporting the
  </div>
  <div class="headerTitle">
    Galloping Gallery
  </div>
  <div class="headerSubTitle">
    A division of the BronyHouse
  </div>
  <div id="location">
    BronyCon 2018
  </div>
  <div id="date">
    Saturday, Jun 13 2018 1:05:18
  </div>
  <svg id="barcode"></svg>
  <div class="keepIt">
    Keep your receipt!
  </div>
  <div class="keepItBody">
    This original receipt is required to pick up any OnDemand items* or for Returns. Undamaged merchandise can be returned for a refund within 24 hours. Faulty goods can be exchanged anytime during this convention while the vendor hall is open. No returns are allowed for OnDemand items except at the discretion of BronyHouse staff. *Unclaimed on-demand items can be claimed without receipt in the final hours of the convention by describing the order in detail.
  </div>
  <hr>

  <!-- Items Purchased -->
  <div class="items">
    <div class="item">
      <div class="itemRow">
        <div class="itemName">Where There's Trouble</div>
        <div class="itemPrice itemTaxable">$2.00</div>
      </div>
      <div class="itemRow">
        <div class="itemColor"></div>
        <div class="itemData1">DNC-P01</div>
        <div class="itemData2">DaniCojo</div>
        <div class="itemData3 itemQuantity">10</div>
      </div>
      <div class="itemRow">
        <div class="itemColor"></div>
        <div class="itemData1">Print</div>
        <div class="itemData2">Reg(WS) 11x17 Bordered</div>
        <div class="itemData3">$20.00</div>
      </div>
    </div>
    <div class="item">
      <div class="itemRow">
        <div class="itemName">Miraculous Ladybug & Cat Noir</div>
        <div class="itemPrice itemTaxable">$1.25</div>
      </div>
      <div class="itemRow">
        <div class="itemColor"></div>
        <div class="itemData1">DNC-P03</div>
        <div class="itemData2">DaniCojo</div>
        <div class="itemData3 itemQuantity">10</div>
      </div>
      <div class="itemRow">
        <div class="itemColor"></div>
        <div class="itemData1">Print</div>
        <div class="itemData2">Reg(WS) 8.5x11 Borderless</div>
        <div class="itemData3">$12.25</div>
      </div>
    </div>
  </div>

  <!-- Totals -->
  <hr>
<div class="flex">
    <div id="qrcode"></div>
    <div class="totals">
      <div class="section">
        <div class="row">
          <div class="col1"></div>
          <div class="col2">Subtotal</div>
          <div class="col3">$61.25</div>
        </div>
        <div class="row">
          <div class="col1">0.00%</div>
          <div class="col2">Subtotal</div>
          <div class="col3">$61.25</div>
        </div>
        <div class="row">
          <div class="col1">2.75%</div>
          <div class="col2">Credit Card Fee</div>
          <div class="col3">$1.68</div>
        </div>
      </div>
      <div class="section">
        <div class="row">
          <div class="col1">Total</div>
          <div class="col2"></div>
          <div class="col3">$62.93</div>
        </div>
      </div>
      <div class="section">
        <div class="row">
          <div class="col1">Tendered</div>
          <div class="col2"></div>
          <div class="col3"></div>
        </div>
        <div class="row">
          <div class="col1">Change</div>
          <div class="col2"></div>
          <div class="col3">$62.93</div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="footer">
    <div class="eta">Saturday @ 1:25 PM</div>
    <div class="printType">customer copy</div>
  </div>
</div>
<script src='https://cdn.jsdelivr.net/npm/jsbarcode@3.8.0/dist/barcodes/JsBarcode.code128.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js'></script>
<script src="script.js"></script>
</body>
</html>

Read Also Create Stunning GSAP Carousel Slider with HTML, CSS, and JavaScript.webp

Create Stunning GSAP Carousel Slider with HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the digital receipt is in place, the next step is to add styling to the digital receipt using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our digital receipt. Let's break down the code section by section:

1. @font-face: This section defines a custom font named 'Equestria' and specifies the source (URL) of the font file. The font file is in OpenType Format (OTF) and is hosted on Dropbox.

2. body: These styles are applied to the <body> element. It sets the default font for the entire page to 'Roboto' with a fallback to a generic sans-serif font. It also removes the default margin and padding on the <body> element, making the page content start at the top-left corner of the viewport.

3. .receipt: Styles for an element with the class 'receipt.' It adds padding, sets a fixed width, and gives it a black border.

4. .orderNo: Styles for an element with the class 'orderNo.' It makes the text align to the right, adds some padding at the bottom, sets the font size to 8pt, and makes it bold. Additionally, it sets this style to hide the element when it is empty (contains no content).

5. .headerSubTitle and .headerTitle: These classes define styles for elements with those classes. They set the font family to 'Equestria' (a custom font defined earlier), specify font sizes, and text alignment.

6. #location, #date, #barcode: These styles are applied to elements with the IDs 'location,' 'date,' and 'barcode,' respectively. They set various properties such as text alignment, font size, and display settings for these specific elements.

7. .watermark: This style defines a watermark, making it absolutely positioned with specific left and top values, and reduces its opacity to 0.1 (making it faint).

8. .keepIt and .keepItBody: These classes define styles for elements with those classes, specifying text alignment, font size, and font weight.

9. .item, .itemRow, .itemName, .itemPrice, .itemColor, .itemData2, .itemData3, .itemQuantity, .itemTaxable: These styles are used to format various elements related to displaying items in a list. They control margins, alignment, and other properties.

10. .flex, #qrcode, and .totals: These styles affect elements with the classes 'flex,' the ID 'qrcode,' and classes 'totals.' They adjust their alignment and layout properties.

11. .footer and .eta: These styles apply to the elements with the classes 'footer' and 'eta.' They control the appearance of the page footer, including background color, text color, and spacing. The .eta style adds a label before its content when it's not empty.

12. .printType and .about: These styles control the appearance of elements with the classes 'printType' and 'about.' They define background color, text color, and other properties.

13. Inside the .about class, there is a style for the <li> elements within it, controlling text alignment.

@font-face {
  font-family: 'Equestria';
  src: url("https://www.dropbox.com/s/x04iih58ob04d56/Equestria.otf?raw=1");
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0px;
  padding: 0px;
}

.receipt {
    padding: 3mm;
    width: 80mm;
    border: 1px solid black;
}
.orderNo {
  width: 100%;
  text-align: right;
  padding-bottom: 1mm;
  font-size: 8pt;
  font-weight: bold;
}

.orderNo:empty {
  display: none;
}

.headerSubTitle {
  font-family: 'Equestria', 'Permanent Marker', cursive;
  text-align: center;
  font-size: 12pt;
}

.headerTitle {
  font-family: 'Equestria', 'Permanent Marker', cursive;
  text-align: center;
  font-size: 24pt;
  font-weight: bold;
}

#location {
  margin-top: 5pt;
  text-align: center;
  font-size: 16pt;
  font-weight: bold;
}

#date {
  margin: 5pt 0px;
  text-align: center;
  font-size: 8pt;
}

#barcode {
  display: block;
  margin: 0px auto;
}

#barcode:empty {
  display: none;
}

.watermark {
   position: absolute;
   left: 7mm;
   top: 60mm;
   width: 75mm;
   opacity: 0.1;
}

.keepIt {
  text-align: center;
  font-size: 12pt;
  font-weight: bold;
}

.keepItBody {
  text-align: justify;
  font-size: 8pt;
}

.item {
  margin-bottom: 1mm;
}

.itemRow {
  display: flex;
  font-size: 8pt;
  align-items: baseline;
}

.itemRow > div {
  align-items: baseline;
}

.itemName {
  font-weight: bold;
}

.itemPrice {
  text-align: right;
  flex-grow: 1;
}

.itemColor {
  width: 10px;
  height: 100%;
  background: yellow;
  margin: 0px 2px;
  padding: 0px;
}

.itemColor:before {
  content: "\00a0";
}


.itemData2 {
  text-align: right;
  flex-grow: 1;
}

.itemData3 {
  width: 15mm;
  text-align: right;
}

.itemQuantity:before {
  content: "x";
}

.itemTaxable:after {
  content: " T";
}

.flex {
  display: flex;
  justify-content: center;
}

#qrcode {
  align-self: center;
  flex: 0 0 100px
}

.totals {
  flex-grow: 1;
  align-self: center;
  font-size: 8pt;
}

.totals .row {
  display: flex;
  text-align: right;
}

.totals .section {
  padding-top: 2mm;
}

.totalRow > div, .total > div {
  text-align: right;
  align-items: baseline;
  font-size: 8pt;
}

.totals .col1 {
  text-align: right;
  flex-grow: 1;
}

.totals .col2 {
   width: 22mm; 
}

.totals .col2:empty {
  display: none;
}

.totals .col3 {
  width: 15mm;  
}

.footer {
  overflow: hidden;
  margin-top: 5mm;
  border-radius: 7px;
  width: 100%;
  background: black;
  color: white;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.footer:empty {
    display: none;
}

.eta {
  padding: 1mm 0px;
}

.eta:empty {
    display: none;
}

.eta:before {
    content: "Estimated time order will be ready: ";
  font-size: 8pt;
  display: block;
}

.etaLabel {
  font-size: 8pt;
}

.printType {
  padding: 1mm 0px;
  width: 100%;
  background: grey;
  color: white;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.about {
  font-size: 12pt;
  overflow: hidden;
  background: #FCEC52;
  color: #3A5743;
  border-radius: 7px;
  padding: 0px;
  position: absolute;
  width: 500px;
  text-align: center;
  left: 50%;
  margin-top: 50px;
  margin-left: -250px;
}

.about li {
  text-align: left;
}

Step 3 (JavaScript Code):

Barcodes make receipts more functional. We'll guide you on integrating barcode functionality into your digital receipt using JavaScript. Ensure you choose a reliable barcode library for this step.

Let's break down what each part of the code is doing:

1. var receiptID = "20180613T130518.512Z"; and var receiptQRID = "4#4s1Fs";:

These lines define two variables, receiptID and receiptQRID, which store some unique identifiers or codes.

2. JsBarcode("#barcode", receiptID, { ... });: This line is using the JsBarcode library to generate a barcode and display it in an HTML element with the ID "barcode." The barcode is generated from the receiptID variable, which is set to "20180613T130518.512Z." The options for the barcode generation are provided in the object passed as the third argument. These options include:

format: "code128": Specifies that the barcode should be in the Code 128 format.
width: 1.3: Sets the width of the barcode.
height: 30: Sets the height of the barcode.
marginLeft: 0: Sets the left margin of the barcode.
displayValue: false: Specifies that the human-readable value should not be displayed on the barcode.

3. var qrcode = new QRCode(document.getElementById("qrcode"), { ... });: This code uses the QRCode library to generate a QR code and display it in an HTML element with the ID "qrcode." The QR code is generated from the text "https://gg.bronyhouse.com/r/" + receiptQRID, where receiptQRID is set to "4#4s1Fs." The options for QR code generation are provided in the object passed as the second argument. These options include:

text: Specifies the content of the QR code, which is a URL in this case.
colorDark: "#000000": Sets the color of the dark (black) modules in the QR code.
colorLight: "#ffffff": Sets the color of the light (white) modules in the QR code.
width: 100: Sets the width of the QR code.
height: 100: Sets the height of the QR code.
correctLevel: QRCode.CorrectLevel.H: Specifies the error correction level for the QR code, with "H" representing the highest level of error correction.


var receiptID = "20180613T130518.512Z";
var receiptQRID = "4#4s1Fs"

JsBarcode("#barcode", receiptID, {
  format: "code128",
  width: 1.3,
  height: 30,
  marginLeft: 0,
  displayValue: false
});

var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "https://gg.bronyhouse.com/r/"+receiptQRID,
	colorDark : "#000000",
	colorLight : "#ffffff",
  width : 100,
  height : 100,
	correctLevel : QRCode.CorrectLevel.H,
});

Final Output:

Create Digital Customer Sample Receipt using HTML, CSS, and JavaScript.gif

Read Also

how to create a pure css glow button using html and css.png

Create an Eye-Catching CSS Glow Button in Just a Few Steps

Conclusion:

In conclusion, digital customer sample receipts are valuable for businesses. By following this guide, you'll create receipts that are not only informative but also visually appealing and user-friendly. You can improve your customer interactions and leave a lasting impression.

Now you're equipped to create outstanding digital customer sample receipts using HTML, CSS, and JavaScript.

Code by: Dane Jones

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: customer sample receipt, html receipt template, css styling for receipt, javascript barcode integration, digital receipt development, javascript, receipt design ui, how to create a customer sample receipt using html and css, integrating barcode in digital receipt

End of the article