https://tap2park.ca/

ID de exploración:
fa79bee0-562a-471d-8d31-07d9d94f21b6Finalizado
URL enviada:
https://tap2park.ca/
Informe finalizado:

Enlaces: 0 encontrados

Los enlaces salientes identificados en la página

Variables JavaScript: 14 encontradas

Las variables JavaScript globales cargadas en el objeto de ventana de una página son variables declaradas fuera de las funciones y a las que se puede acceder desde cualquier lugar del código en el ámbito actual

NombreTipo
0object
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
jspdfobject
ES6Promisefunction
html2canvasfunction
StripeCheckoutobject

Mensajes de registro de la consola: 1 encontrados

Mensajes registrados en la consola web

TipoCategoríaRegistro
errornetwork
URL
https://tap2park.ca/favicon.ico
Texto
Failed to load resource: the server responded with a status of 404 (Not Found)

HTML

El cuerpo HTML sin procesar de la página

<!DOCTYPE html><html lang="en-US"><head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <!-- <script src="jquery.min.js"></script>-->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <!--<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>-->
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#country').on('change', function () {
                var countryID = $(this).val();
                if (countryID) {
                    $.ajax({
                        type: 'POST',
                        url: 'ajaxData.php',
                        data: 'country_id=' + countryID,
                        success: function (html) {
                            $('#stateAndcities').html(html);
                        }
                    });
                }
            });
        });
    </script>
    <title>Mobile Parking</title>
    <meta charset="utf-8">

    <style>
        .container {
            padding: 10px;
        }

        .item {
            width: 50%;
        }

        .aligncenter {
            text-align: center;
        }

        .bigger {
            font-size: 1.3em;
        }

        .bigger a:link {
            text-decoration: none;
        }

        .green {
            color: #34A853;
        }

        /* for success msg */
        .red {
            color: #EA4335;
        }

        /* for error msg */
        .stripe-button {
            width: 200%;
            font-family: 'Strait', sans-serif;
            white-space: nowrap;
            display: inline-block;
            text-transform: uppercase;
            padding: 0.7em 1em;
            text-decoration: none !important;
            outline: none !important;
            line-height: 1;
            border-style: solid;
            box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7) !important;
            text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3) !important;
            transition-duration: .3s;
            -moz-transition-duration: .3s;
            -webkit-transition-duration: .3s;
            -o-transition-duration: .3s;
            -khtml-transition-duration: .3s;
            outline: none;
            cursor: pointer;
            border-radius: 2px;
        }

        .stripe-button, .stripe-button:visited {
            background-color: #e22b38;
            color: #ffffff !important;
            border-color: #e22b38;
            font-size: 18px;
            font-weight: bold;
            border-width: 1px;
        }

        .stripe-button:hover, .stripe-button:active, .stripe-button:focus {
            background-color: #bd212c;
            color: #ffffff !important;
            border-color: #bd212c;
        }
    </style>

    <style>
        html {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        body {
            font-family: Helvetica;
            -webkit-font-smoothing: antialiased;
            background: rgba(0, 0, 0, 0);
        }

        h2 {
            text-align: center;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: black;
            padding: 20px 0;
        }

        .flex {
            display: flex;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
            text-transform: uppercase;
            flex-wrap: wrap;
            line-height: 20px;
        }

        .flex div:first-child {
            width: 45%;
        }

        .flex div:last-child {
            width: 45%;
        }

        #payment_wrapper {
            width: 50%;
            margin: 0 auto; /* Center horizontally */
            box-sizing: border-box; /* Include padding and border in width */
        }

        @media (max-width: 768px) {
            #payment_wrapper {
                width: 100%;
            }
        }

        #thank_you {
            padding-left: 405px;
        }

        #timeout {
            text-align: center;
            width: 50%;
            margin: auto;
        }

        @media only screen and (min-width: 480px) and (max-width: 767px) {
            .flex {
                font-size: 1rem;
                justify-content: flex-start;
            }

            .flex div:first-child {
                width: 40%;
            }

            .flex div:last-child {
                width: 50%;
            }

            #payment_wrapper {
                width: 80%;
            }

            #thank_you {
                padding-left: 40px;
            }

            #timeout {
                width: 80%;
            }
        }





        /*Sidebar Styles */


        .button {
            transition: all .2s ease-in-out;
        }

        .button:hover {
            transform: scale(1.2);
        }

        .button input {
            font-size: 10px;
            color: white;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
            background: url("https://i.imgur.com/yDJ25HJ.png");
            background-repeat: no-repeat;
            width: 60px;
            height: 60px;
            border: none;
            margin-bottom: 60px;
        }


        /* Header Styles */

        .header-wrapper {
            margin: 10px 10px 20px;
        }

        .header {
            text-align: center;
            background-repeat: no-repeat;
            border-radius: 5px;
            font-size: 12px;
            font-weight: bold;
            border: none;
            border-collapse: collapse;
            width: 1720px;
            height: 20px;
            max-width: 100%;
            white-space: nowrap;
            background-color: white;
        }

        .header h2 {
            text-align: center;
            font-size: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: white;
            padding: 30px 0;
        }


        /* Table Styles */

        .table-wrapper {
            margin: 50px 50px 30px;
            box-shadow: 0px 35px 50px rgba(0, 0, 0, 0.2);
        }

        .fl-table {
            border-radius: 5px;
            font-size: 12px;
            font-weight: bold;
            border: none;
            border-collapse: collapse;
            width: 100%;
            max-width: 100%;
            white-space: nowrap;
            background-color: white;
        }

        .fl-table th:hover {
            cursor: pointer;
            opacity: 0.8;
            font-size: 13px;
        }

        .fl-table td:hover {
            cursor: pointer;
            opacity: 0.8;
            font-size: 13px;
        }

        .fl-table td, .fl-table th {
            text-align: center;
            padding: 8px;
        }

        .fl-table td {
            border-right: 1px solid #f8f8f8;
            font-size: 12px;
        }

        .fl-table thead th {
            color: #ffffff;
            background: #a80202;
            border-bottom: 3px solid black;

        }


        .fl-table thead th:nth-child(odd) {
            color: #ffffff;
            background: #b80000;
        }

        .fl-table tr:nth-child(even) {
            background: #FFFFFF;
        }


        /* Footer Styling */

        .footer-wrapper {
            bottom: 0;
            width: 10%;
            height: 60px;
            background-color: white;
            margin-top: 22%
        }

        .flex-item p {
            justify-content: space-between;
            display: flex;
        }


        /* Responsive */

        @media only screen and (min-width: 2280px) and (max-width: 3840px) {
            .header {
                width: 280px;
                height: 280px;
                background-image: url(images/logo.png);
                white-space: nowrap;
            }

            input[type="text"] {
                height: 80px;
                width: 600px;
            }

            .flex-item p {
                font-size: 26px;
                font-weight: bold;
            }
        }

        @media only screen and (max-width: 2280px) {

            .header {
                width: 240px;
                height: 240px;
                background-image: url(images/logo.png);
                white-space: nowrap;
            }

            .fl-table {
                display: block;
                width: 100%;
            }

            .table-wrapper:before {
                content: "Scroll horizontally >";
                display: block;
                text-align: right;
                font-size: 14px;
                color: white;
                padding: 0 0 10px;
            }

            .fl-table thead, .fl-table tbody, .fl-table thead th {
                display: block;
            }

            .fl-table thead th:last-child {
                border-bottom: none;
            }

            .fl-table thead {
                float: left;
            }

            .fl-table tbody {
                width: auto;
                position: relative;
                overflow-x: auto;
            }

            .fl-table td, .fl-table th {
                padding: 20px .625em .625em .625em;
                height: 60px;
                vertical-align: middle;
                box-sizing: border-box;
                overflow-x: hidden;
                overflow-y: auto;
                width: 120px;
                font-size: 13px;
                text-overflow: ellipsis;
            }

            .fl-table thead th {
                text-align: left;
                border-bottom: 1px solid #f7f7f9;
            }

            .fl-table tbody tr {
                display: table-cell;
            }

            .fl-table tbody tr:nth-child(odd) {
                background: none;
            }

            .fl-table tr:nth-child(even) {
                background: transparent;
            }

            .fl-table tr td:nth-child(odd) {
                background: #FFFFFF;
                border-right: 1px solid #E6E4E4;
            }

            .fl-table tr td:nth-child(even) {
                border-right: 1px solid #E6E4E4;
            }

            .fl-table tbody td {
                display: block;
                text-align: center;
            }

            .footer-wrapper {
                bottom: 0;
                width: 100%;
                height: 60px;
                background-color: white;
                margin-top: 20%;
            }

        }

        @media (max-width: 767px) {
            .flex-item p {
                flex-direction: column;
            }

            .flex-item p input {
                margin-top: 10px;
            }

            .item.flex-item {
                width: 100%;
            }

            .stripe-button, .stripe-button:visited {
                width: 100%;
            }
        }
    </style>

    <!-- jQuery is used only for this example; it isn't required to use Stripe -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Stripe JavaScript library -->
    <script src="https://checkout.stripe.com/checkout.js"></script>

</head>
<body style="">


<div class="header-wrapper">
    <div class="header"></div>
</div>


<h2><div id="address"></div></h2>
<div class="container">
    <div id="timeout_2"></div>
    <div class="item flex-item" id="form_buy">
        <p>Enter Site Code: <input type="text" style="font-size: 170%;" id="sitecode" name="sitecode" value=""></p>
        <p>Enter License Plate: <input type="text" style="font-size: 170%;" id="plate" name="plate"></p>
        <p>Select Length of Stay: </p>
        <input type="hidden" value="" id="timezone">
        <input type="hidden" value="" id="_address">
        <!-- Buy button -->
        <div id="buynow"></div>
        <input type="hidden" id="purchased_time" value="">
    </div>
    <div id="paymentDetails" style="display: none;">
        <div id="timeout"></div>
        <h2>Payment Information</h2>

        <div id="payment_wrapper" style="margin: auto;">
            <div class="flex flex-col">
                <div>Address</div>
                <div id="address2"></div>
            </div>
            <div class="flex flex-col">
                <div>Site Code</div>
                <div id="site_code"></div>
            </div>
            <div class="flex flex-col">
                <div>Item Name</div>
                <div id="item_name">Tap n G0</div>
            </div>
            <div class="flex flex-col">
                <div>Purchase Time</div>
                <div id="purchase_time"></div>
            </div>
            <div class="flex flex-col">
                <div>Expiration Time</div>
                <div id="expiration_time"></div>
            </div>
            <div class="flex flex-col">
                <div>Duration</div>
                <div id="duration"></div>
            </div>
            <div class="flex flex-col">
                <div>Order ID</div>
                <div id="orderID"></div>
            </div>
            <div class="flex flex-col">
                <div>Transaction ID</div>
                <div id="txnID"></div>
            </div>
            <div class="flex flex-col">
                <div>Amount Paid</div>
                <div id="productPriceID"></div>
            </div>
            <div class="flex flex-col">
                <div>Convenience Fee</div>
                <div id="conv_fee"></div>
            </div>
            <div class="flex flex-col">
                <div>Total Paid</div>
                <div id="total_paid"></div>
            </div>
            <div class="flex flex-col hst">
                <div>HST</div>
                <div id="hst">0</div>
            </div>
            <div class="flex flex-col">
                <div>GST</div>
                <div id="gst"></div>
            </div>
            <div class="flex flex-col parklink">
                <div>Translink tax</div>
                <div id="parklink"></div>
            </div>
            <div class="flex flex-col qr_code_div">
                <div>QR Code</div>
                <div id="qr_code_div"> <img src="" id="qr_code" title="QR Code" alt="QR code"></div>
            </div>
            <div class="flex flex-col green bigger">
                <div>Payment Status</div>
                <div>Successful</div>
            </div>

            <div class="flex flex-col green bigger">
                <button id="download-pdf" class="bg-red text-white">Download Receipt</button>
            </div>
        </div>

        <p class="" id="thank_you">Thank you for your patronage.</p>
    </div>
</div>

<div class="footer-wrapper">
    <script src="moment.js"></script>
    <script src="moment-timezone-with-data.js"></script>
    <script>

        // listener for plate state
        // time fields * enable cone plate state is true
        //
        const handler = StripeCheckout.configure({
            key: 'pk_live_51BLfSDIYLGP8oT69FWKjdbq80zn59aubaOjLZ6YNJZBo6rwTty99crrI7YKyadAIZSuDh1oZoPF0ItG4GtZnRsM100V3NhdAHu',
            image: 'images/company-logo.png',
            locale: 'auto',
            token: function (token) {
                // You can access the token ID with `token.id`.
                // Get the token ID to your server-side code for use.

                $('#paymentDetails').hide();
                $('#payProcess').val(1);
                const plate = $('#plate').val(),
                    button = $('.stripe-button.selected'),
                    productPrice = $(button).data('product_price'),
                    productDescription = $(button).data('duration') + " for vehicle plate " + plate;

                const address = $(button).data('address');
                let purchased_time = $(button).data('purchased_time');

                const isBritishVancouver = $(button).data('is-british-vancouver');

                // set purchased time duration

                $('#purchased_time').val($(button).data('purchased_time'));

                const expiration = $(button).data('expiration');
                const flatRate = $(button).data('flat-rate');

                const convFee = parseFloat($(button).data('conv_fee'));


                const timeFormat = "HH:mm:ss";
                const dateFormat = "YYYY-MM-DD";

                const defaultTimezone = $('#timezone').val();

                let currentTime = moment().tz(defaultTimezone);
                let expiryDate = moment(currentTime.format(dateFormat) + " " + expiration);//.tz(defaultTimezone);

                if (currentTime > expiryDate) {
                    expiryDate = expiryDate.add(1, 'days');
                }

                // data form magic
                $.ajax({
                    url: 'stripe_charge.php',
                    type: 'POST',
                    data: {
                        stripeToken: token.id,
                        stripeEmail: token.email,
                        itemName: productDescription,
                        itemPrice: productPrice,
                        currency: 'cad',
                        address: $('#_address').val(),
                        plate: plate,
                        time: purchased_time,
                        timezone: defaultTimezone,
                        expirationDate: expiryDate.format(timeFormat),
                        is_flat_rate: flatRate === 1,
                        timeout: expiryDate.format(`${dateFormat} ${timeFormat}`),
                        conv_fee: convFee
                    },
                    dataType: "json",
                    beforeSend: function () {
                        $('#payButton').prop('disabled', true);
                        $('#payButton').html('Please wait...');

                        $('.stripe-button').prop('disabled', true).css({
                            'background-color': 'darkgrey',
                            'cursor': 'not-allowed',
                            'border-color': 'darkgrey'
                        });
                    },
                    success: function (data) {
                        $('#payProcess').val(0);
                        if (data.status == 1) {
                            const taxRate = 1.24;

                            const selectedRate = productPrice / 100;
                            const gst = selectedRate - (selectedRate / 1.05);
                            const parkLink = (selectedRate - gst) - (selectedRate - gst) / taxRate;

                            $('#buynow').hide();
                            $('#txnEmail').html(token.email);
                            $('#orderID').html(data.txnData.id);
                            $('#txnID').html(data.txnData.balance_transaction);
                            $('#timeout').html('Current Time: ' + moment(data.timeout.date).tz($('#timezone').val()).format('LLLL'));

                            if ( data.qrCodeUrl+''.length <= 0) {
                                $('#qr_code').parents('.qr_code_div').hide();
                            }

                            $('#qr_code').attr('src', data.qrCodeUrl);

                            $('#productPriceID').html((productPrice / 100).toLocaleString('en-US', {style: 'currency', currency: 'CAD'}));
                            $('#duration').html(data.txnData.description);
                            $('#address2').html($('#address').text());
                            $('#expiration_time').html(data.timeout);
                            $('#site_code').html($('#sitecode').val());
                            $('#purchase_time').html(data.timein);
                            $('#conv_fee').html((data.conv_fee / 100).toLocaleString('en-US', {style: 'currency', currency: 'CAD'}));
                            $('#total_paid').html( (parseFloat(productPrice) / 100 + parseFloat(convFee) / 100).toLocaleString('en-US', {style: 'currency', currency: 'CAD'}));

                            if (isBritishVancouver === true) {
                                $('#parklink').html(parkLink.toLocaleString('en-US', {style: 'currency', currency: 'CAD'}));
                                $('#gst').html(gst.toLocaleString('en-US', {style: 'currency', currency: 'CAD'}));
                                $('#hst').parents('.hst').hide();
                            } else {
                                $('#gst').parents('.gst').hide();
                                $('#parklink').parents('.parklink').hide();
                            }

                            $('#form_buy').hide();
                            $('#paymentDetails').show();

                            $('.stripe-button.selected').removeClass('selected').attr('style', '');

                        } else {
                            $('#payButton').prop('disabled', false);
                            $('#payButton').html('Buy Now');
                            alert('Some problem occurred, please try again.' + JSON.stringify(data));
                        }
                    },
                    error: function (data) {
                        $('#payProcess').val(0);
                        $('#payButton').prop('disabled', false);
                        $('#payButton').html('Buy Now');
                        $('.stripe-button').prop('disabled', false);
                        alert('Error: Some problem occurred, please try again.' + JSON.stringify(data));
                    }
                });
            }
        });
        const plate = $("#plate"),
            stripeBtn = $(".stripe-button");
        const stripe_closed = function () {
            const processing = $('#payProcess').val();
            if (processing === 0) {
                $('#payButton').prop('disabled', false);
                $('#payButton').html('Buy Now');
            }
            $('.stripe-button.selected').prop('disabled', false).removeClass('selected');

            $(".stripe-button").prop('disabled', false).attr('style', 'background-color: #e22b38; cursor: pointer; border-color: #cccccc;');

            stripeBtn.prop('disabled', true);
        };

        function getSiteCodeDetails(data, total) {
            let convFee = 0;
            const convFees = parseFloat(data['conv_fee_min']);
            const isConvFeeActive = parseInt(data['con_fee_active']);
            const convFeePercentage = (total * parseFloat(data['conv_percentage']) / 100);
            const convFeeByMin = convFees;
            const city = data['city'];
            const province = data['province'];
            let isBritishVancouver = false;

            if (province === 'British Columbia' && city === 'Vancouver') {
                isBritishVancouver = true;
            }

            if (isConvFeeActive === 1) {
                convFee = convFeeByMin > convFeePercentage ? convFeeByMin : convFeePercentage;
            }
            return {convFee, isBritishVancouver};
        }

        function getSitecodeTickets(_this, t_zone = false) {
            $.ajax({
                url: "ajaxData.php", data: {sitecode:_this.val(), t_zone}, success: function (data) {
                    data = JSON.parse(data);
                    if (data.length === 0 && _this.val().length > 3) {
                        let html_str1 = '<p>This site is currently unavailable. there is no need to pay at the moment. Please check back soon.</p>';
                        $("#timeout_2").html(html_str1).css({
                            "font-size": "28px",
                            "font-weight": "bold",
                            "padding": "10px",
                            "color": "#ffffff",
                            "background": "#bd2c2c",
                        }).show();
                        setTimeout(function () {
                            $("#timeout_2").html('').hide();
                        }, 5000);
                    }
                    let html_str = '';

                    if (parseInt(data[0]?.override) === 1) {
                        let  total = parseFloat(data[0]['overrided_rate']);
                        let {convFee, isBritishVancouver} = getSiteCodeDetails(data[0], total);

                        html_str += '<div>';
                        html_str += '<button class="stripe-button" id="payButton" data-is-british-vancouver='+isBritishVancouver+'  data-conv_fee='+convFee+' data-flat-rate=' + data[0]['override_flatrate'] + '  data-expiration=' + data[0]['override_expiration'] + ' data-product_price=' + (total) + ' data-purchased_time="' + data[0]["override_purchased_time"] + '" data-duration="' + data[0]["name"] + '">' + data[0]["name"] + '<br>' + ((total / 100).toLocaleString('en-US', {
                            style: 'currency',
                            currency: 'CAD',
                        })) + '</button>';
                        html_str += '</div>';


                    } else {
                        $(data).each(function (index) {
                            let total = parseFloat(data[index]["rate"]);
                            let {convFee, isBritishVancouver} = getSiteCodeDetails(data[index], total);

                            html_str += '<div>';
                            html_str += '<button  class="stripe-button" id="payButton" data-is-british-vancouver='+isBritishVancouver+'  data-conv_fee='+convFee+' data-flat-rate=' + data[index]['flat_rate'] + '  data-expiration=' + data[index]['expiration'] + ' data-product_price=' + (total) + ' data-purchased_time="' + data[index]["purchased_time"] + '" data-duration="' + data[index]["duration"] + '">' + data[index]["duration"] + '<br>' + ((total / 100).toLocaleString('en-US', {
                                style: 'currency',
                                currency: 'CAD',
                            })) + '</button>';
                            html_str += '</div>';
                        });
                    }

                    $("#buynow").html(html_str);
                    $(".stripe-button").prop('disabled', true).css({
                        'background-color': 'darkgrey',
                        'cursor': 'not-allowed',
                        'border-color': 'darkgrey'
                    });

                    if (data) {
                        $("#address").html(data[data.length - 1]?.address || '');
                        // store inside the hidden field to prevent translation
                        $("#_address").val(data[data.length - 1]?.address || '');
                        // Set current date based on timezone
                        const date = moment();
                        const defaultTimezone = null !== data[0]?.timezone && data[0]?.timezone.length > 0 ? data[0]?.timezone : 'America/New_York';
                        const currentDate = date.tz(defaultTimezone);

                        $('#timestamp').html('Current Time: ' + currentDate.format('LLLL')).css('fontWeight', 'bold');
                        $('#timezone').val(defaultTimezone);
                    }
                }, error: function (data) {
                    alert('Error: Some problem occurred, please try again.' + JSON.stringify(data));
                }
            });
        }

        $(document).ready(function () {
            $('body').on('keyup blur', "#plate", function (e) {
                if ($(this).val() !== '') {
                    $.ajax({
                        url: "ajaxData.php",
                        data: {plate: $(this).val(), address: $('#address').text()},
                        success: function (data) {
                            const rslt = JSON.parse(data);

                            if (rslt.length > 0) {
                                let html_str1 = '';
                                html_str1 += '<p> You have already paid for parking which expires at: ' + rslt[0] + '. Would you like to add more time?</p>';
                                $("#timeout_2").html(html_str1).css({
                                    "font-size": "28px",
                                    "font-weight": "bold",
                                    "padding": "10px",
                                    "color": "#ffffff",
                                    "background": "#bd2c2c",
                                }).show();

                                //getSitecodeTickets($('#sitecode'), true);

                            } else {
                                $("#timeout_2").html('').css({});
                            }
                        },
                        error: function (data) {
                            alert('Error: Some problem occurred, please try again.' + JSON.stringify(data));
                        }
                    });
                } else {
                    $(".stripe-button").prop('disabled', true).css({
                        'background-color': 'darkgrey',
                        'cursor': 'not-allowed',
                        'border-color': 'darkgrey'
                    });
                }

                $(".stripe-button").prop('disabled', false).attr('style', 'background-color: #e22b38; cursor: pointer; border-color: #cccccc;');
            });

            $('body').on("click", ".stripe-button", function (event) {
                //$(event.target).prop('disabled', true);
                $(".stripe-button").prop('disabled', true).css({
                    'background-color': 'darkgrey',
                    'cursor': 'not-allowed',
                    'border-color': 'darkgrey'
                });

                let price = $(event.target).data('product_price'),
                    duration = $(event.target).data('duration'),
                    purchased_time = $(event.target).data('purchased_time');

                let message = duration + ' : ' + (price/100).toLocaleString('en-US', {style: 'currency', currency: 'CAD'}) + '\n';

                const convFee = parseFloat($(event.target).data('conv_fee'));
                message += 'Convenience Fee : ' + (convFee/100).toLocaleString('en-US', {style: 'currency', currency: 'CAD'}) + '\n';


                price = parseFloat(price) + convFee;

                message += 'Total: ' + (price / 100).toLocaleString('en-US', {style: 'currency', currency: 'CAD'});

                $('#purchased_time').val(purchased_time);

                $(event.target).addClass('selected');



                if (confirm(message)) {
                    handler.open({
                        name: 'TargetPark',
                        description: duration,
                        amount: price,
                        currency: 'cad',
                        closed: stripe_closed
                    });
                }


            });

            $('#sitecode').on('keyup blur', function (e) {

                if ($(this).val() !== '' && $(this).val().length > 3) {
                    getSitecodeTickets($(this));
                } else {
                    $("#buynow").html('');
                    $("#address").html('');
                }
            });
        })


        // Close Checkout on page navigation:
        window.addEventListener('popstate', function () {
            handler.close();
        });
    </script>

    <script>
        $(function () {
            $('#sitecode').val();

            if ($('#sitecode').val() !== '') {
                getSitecodeTickets($('#sitecode'));
            } else {
                $("#buynow").html('');
                $("#address").html('');
            }
        })
    </script>

    <script>
        $(function () {
            document.getElementById('download-pdf').addEventListener('click', function() {
                //const element = document.body; // Get the HTML element to be converted to PDF



                html2canvas(document.body).then(function(canvas) {

                    $('#download-pdf').hide();

                    const imgData = canvas.toDataURL('image/png'); // Convert canvas to image data

                    const {jsPDF} = window.jspdf;
                    const pdf = new jsPDF(); // Initialize jsPDF
                    const imgProps = pdf.getImageProperties(imgData);
                    const pdfWidth = pdf.internal.pageSize.getWidth();
                    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
                    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); // Add image to PDF
                    pdf.save('payment-receipt.pdf'); // Save PDF

                });
            });
        });
    </script>



</div><iframe frameborder="0" allowtransparency="true" src="https://checkout.stripe.com/v3/82u6Z5A5MLNC2LtLYKXrWQ.html?distinct_id=52f2e50a-5926-ae51-7f7f-f84cd178fe4b" name="stripe_checkout_app" class="stripe_checkout_app" style="z-index: 2147483647; display: none; background: rgba(0, 0, 0, 0.004); border: 0px none transparent; overflow: hidden auto; visibility: hidden; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe></body></html>