Introduction
The PAY QR Code feature revolutionizes this experience by allowing vehicle owners to pay for parking quickly and conveniently through their mobile devices. By scanning a QR code, users can access a straightforward interface to input necessary details, select their vehicle type, and complete their payment—all without the hassle of cash or traditional parking meters. This innovative solution not only saves time but also enhances the overall parking experience, making it easier for drivers to navigate city life.
What is the PAY QR Code Feature?
The PAY QR Code feature allows users to pay for parking by scanning a QR code. This eliminates the need for cash and traditional payment methods, making it easier to complete transactions on the go.
Code
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">PAY QR Code</h5>
</div>
<div class="card-body">
@if (Model._GetStreetidDetails != null)
{
if (Model._GetStreetidDetails.Count > 0)
{
var item = Model._GetStreetidDetails[0];
<div class="container">
<div class="row">
<div class="col-md-7 col-12" style="margin:auto;background:#f3f3f3;border-radius:10px;padding:20px;">
<div class="row">
<div class="form-group col-md-6" style="margin:auto;margin-bottom:15px;">
<label for="form_control_1">Street Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" value="@item.StreetName" placeholder="Enter Vehicle Number">
</div>
</div>
<div class="row">
<div class="radio-buttons">
<label class="custom-radio">
<input type="radio" id="cartype" name="radio" checked onchange="toggleVehicleType()">
<span class="radio-btn">
<i class="las la-check"></i>
<div class="hobbies-icon">
<img width="50px" height="auto" src="https://cdn-icons-png.flaticon.com/512/9851/9851669.png" alt="car">
<span class="">CAR</span>
</div>
</span>
</label>
<label class="custom-radio">
<input type="radio" id="twowheelertype" name="radio" onchange="toggleVehicleType()">
<span class="radio-btn">
<i class="las la-check"></i>
<div class="hobbies-icon">
<img width="50px" height="auto" src="https://cdn-icons-png.flaticon.com/512/9983/9983173.png" alt="bike">
<span class="">BIKE</span>
</div>
</span>
</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-6" style="margin:auto;margin-bottom:15px;">
<label for="form_control_1">Vehicle Number <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="Enter Vehicle Number">
</div>
</div>
<div class="row">
<div class="form-group col-md-6" style="margin:auto;margin-bottom:15px;">
<label for="form_control_1">Hour <span class="text-danger">*</span></label>
<select class="form-control" id="carHours" onchange="updateFlatTariff(this)" style="display: block;">
@foreach (var item2 in Model._GetStreetidDetails.Where(d => d.VehicleTypeId == 1))
{
<option value="@item2.FlatTariff">@item2.Text</option>
}
</select>
<select class="form-control" id="bikeHours" onchange="updateFlatTariff(this)" style="display: none;">
@foreach (var item2 in Model._GetStreetidDetails.Where(d => d.VehicleTypeId == 2))
{
<option value="@item2.FlatTariff">@item2.Text</option>
}
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-6" style="margin:auto;margin-bottom:15px;">
<label for="form_control_1">Amount <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="flatTariffAmount" value="10.00" placeholder="Enter Vehicle Number" readonly>
</div>
</div>
<div class="row">
<div class="form-group" style="margin:auto;margin-bottom:15px;">
<button type="button" class="btn btn-primary btn-lg">PAY Now</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
function toggleVehicleType() {
const carHours = document.getElementById('carHours');
const bikeHours = document.getElementById('bikeHours');
const flatTariffAmount = document.getElementById('flatTariffAmount');
if (document.getElementById('cartype').checked) {
carHours.style.display = 'block';
bikeHours.style.display = 'none';
// Update the amount based on car selection
updateFlatTariff(carHours);
} else {
carHours.style.display = 'none';
bikeHours.style.display = 'block';
// Automatically set flat tariff amount to the first option in bikeHours
const firstBikeOption = bikeHours.options[0];
flatTariffAmount.value = firstBikeOption.value; // Set the FlatTariff value
}
}
function updateFlatTariff(selectElement) {
const flatTariffAmount = document.getElementById('flatTariffAmount');
flatTariffAmount.value = selectElement.value; // Update the FlatTariff value
}
</script>
}
}
</div>
</div>
Key Components of the Interface
- Street Name Input: Enter the name of the street where your vehicle is parked to determine applicable tariffs.
- Vehicle Type Selection: Choose between a car and a bike. Different vehicle types may have varying parking rates.
- Vehicle Number Entry: Specify your vehicle number to ensure accurate billing.
- Hourly Rate Selection: Select how long you plan to park, with options that change based on the vehicle type.
- Payment Amount Display: The amount updates automatically based on your selections, providing clarity before payment.
- Pay Now Button: A clear button allows you to finalize your payment quickly.
How Does It Work?
Step-by-Step Process
- Input Street Name: Start by entering the street name where your vehicle is parked.
- Select Vehicle Type: Choose either a car or bike; the interface will adjust accordingly.
- Enter Vehicle Number: Input your vehicle number for accurate tracking.
- Choose Hourly Rate: Select the number of hours you plan to park.
- Review Amount: The total payment amount is updated in real time based on your selections.
- Make Payment: Click the "PAY Now" button to complete your transaction.
Behind the Scenes: The Technology
The PAY QR Code feature uses HTML, CSS, and JavaScript to create an interactive experience. JavaScript handles dynamic updates, ensuring smooth navigation without page reloads.
Benefits of Using the PAY QR Code Feature
- Convenience: Quickly pay on the go, saving time and reducing stress.
- Real-Time Updates: Always have the latest information on parking rates and amounts due.
- User-Friendly Design: The intuitive interface makes it easy for everyone to use.
- Secure Transactions: Digital payments minimize the risk associated with carrying cash.
Conclusion
The PAY QR Code feature transforms the way vehicle owners manage parking payments. Providing a simple and efficient solution enhances the overall experience and contributes to a more convenient urban environment. As cities evolve, embracing such technology will become increasingly important for modern mobility.