Post
Ask Question

Implementing a QR Code Modal for Parking Payment

Introduction

In the fast-paced world of digital transactions, convenience is key. As more consumers turn to contactless payment methods, QR codes have emerged as a popular solution, particularly in settings like parking payments. This article presents a comprehensive guide on implementing a QR code modal that allows users to scan and pay effortlessly. By leveraging the power of HTML, CSS, and JavaScript, we’ll walk through the process of creating an intuitive modal interface that not only displays the QR code but also provides options for printing. Whether you're a developer looking to enhance your application or a business owner aiming to streamline payment processes, this guide will equip you with the tools to modernize your parking payment system effectively.

In today's digital age, integrating QR codes into payment systems can significantly enhance user experience. This article outlines how to create a QR code modal using HTML, CSS, and JavaScript, specifically tailored for a parking payment system.

1. Overview of the QR Code Modal

The modal is designed to display a QR code that users can scan for quick and convenient payment. It contains the following components.

  • Header: Displays the title "QR Code".
  • Body: Contains the QR code and additional information about the payment.
  • Footer: Features a close button and a print button for users who prefer a physical copy.

2. HTML Structure

The modal is structured using Bootstrap classes, which make it responsive and visually appealing. Below is a simplified version of the HTML.

Code

<div class="modal fade" id="QrlinktoImg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">QR Code</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="txtstreetname"></div>
            <div class="modal-body">
                <div id="qrc"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="printQRCode">Print QR Code</button>
            </div>
        </div>
    </div>
</div>

<script>
function GetStreetval(streetid, name) {
    $("#qrc").html('');
    $("#qrc").append("<h1 class='tophead'>Scan & Pay</h1>");
    $("#qrc").append("<h3 class='bothead1'>" + name + "</h3>");
    var quurl = "Enter your url";

    // Create QR Code instance
    var qrcode = new QRCode("qrc", {
        text: quurl,
        width: 290,
        height: 290,
        colorDark: "#000000",
        colorLight: "#FFFFFF",
        correctLevel: QRCode.CorrectLevel.M
    });

    $("#qrc").append("<h2 class='bothead'>GI SMART PARKING</h2>");
    $('#QrlinktoImg').modal('show');

    document.getElementById("printQRCode").addEventListener("click", function () {
        var printWindow = window.open('', '', 'height=600,width=800');
        printWindow.document.write('<html><head><title>Print</title>');
        printWindow.document.write('<style>@media print { body { margin-top:100px; display:flex; justify-content:center; align-items:center; flex-direction:column; } }</style>');
        printWindow.document.write('</head><body >');
        printWindow.document.write($('#qrc').html());
        printWindow.document.close();
        setTimeout(function () {
            printWindow.print();
            printWindow.close();
        }, 250);
    });
}
</script>

3. Generating the QR Code

The QR code is generated using the QRCode library. The function GetStreetval takes in a street ID and name constructs a URL for the payment, and initializes the QR code with this URL.

4. Printing the QR Code

For users who want a physical copy, we provide a print button that opens a new window containing the QR code for printing.

  • Clear Previous Content: The $("#qrc").html(''); line clears any existing QR code or text in the modal.
  • Dynamic Content: It appends a heading and a subheading with the provided name to inform users.
  • URL Construction: Constructs the URL for the QR code based on the street.
  • QRCode Generation: A new QRCode instance is created, rendering a QR code inside the #qrc div with the specified properties (size, colors, and error correction level).
  • Display Modal: Finally, the modal is displayed to the user

Output

Output

Conclusion

This QR code modal provides a seamless way for users to make payments in a parking system. By combining Bootstrap for the modal structure and the QRCode library for generating QR codes, developers can create an efficient payment interface. With a printing option available, users have the flexibility to choose their preferred method of interaction.


Similar Articles