{"id":7,"date":"2025-07-03T23:30:26","date_gmt":"2025-07-03T23:30:26","guid":{"rendered":"https:\/\/parkology-usa.com\/?page_id=7"},"modified":"2025-07-18T14:29:50","modified_gmt":"2025-07-18T14:29:50","slug":"parking-fee-calculator","status":"publish","type":"page","link":"https:\/\/parkology-usa.com\/?page_id=7","title":{"rendered":""},"content":{"rendered":"\n<CTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n    <style>\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 20px;\n    .container {\n      max-width: 500px;\n      margin: auto;\n      background: white;\n      padding: 30px;\n      border-radius: 8px;\n      box-shadow: 0 0 10px rgba(0,0,0,0.1);\n    }\n    h2 {\n      text-align: center;\n    }\n    label {\n      display: block;\n      margin-top: 15px;\n    }\n    input[type=\"text\"], input[type=\"number\"] {\n      width: 100%;\n      padding: 10px;\n      margin-top: 5px;\n      border-radius: 5px;\n      border: 1px solid #ccc;\n    }\n    button {\n      margin-top: 20px;\n      width: 100%;\n      padding: 10px;\n      background-color: #28a745;\n      border: none;\n      color: white;\n      font-size: 16px;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    button:hover {\n      background-color: #218838;\n    }\n    .result {\n      margin-top: 20px;\n      padding: 15px;\n      background-color: #e9f7ef;\n      border-left: 5px solid #28a745;\n    }\n    @media (max-width: 600px) {\n      .container {\n        padding: 20px;\n      }\n    }\n  <\/style>\n  <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n  <script\n        id=\"checkoutScript\"\n\tsrc=\"https:\/\/secure.nmi.com\/token\/CollectCheckout.js\"\n\tdata-checkout-key=\"checkout_public_Z6qCA6MSnF4VHCqKBP37H438w6324489\"\n  ><\/script>\n<\/head>\n<body>\n  <div class=\"container\">\n    <h2>Parking Fee Calculator<\/h2>\n    <!-- <label for=\"plate\">License Plate Number:<\/label> -->\n    <!-- <input type=\"text\" id=\"plate\" name=\"merchant_defined_field_1\" placeholder=\"Enter license plate number\" \/> -->\n\n    <label for=\"hours\">Hours Parked:<\/label>\n    <input type=\"number\" id=\"hours\" min=\"1\" placeholder=\"Enter hours parked\" \/>\n\n    <button onclick=\"calculateFee()\">Calculate Fee<\/button>\n\n    <div id=\"output\" class=\"result\" style=\"display: none;\"><\/div>\n    <button hidden id=\"Checkout\" disabled> Checkout <\/button>\n  <\/div>\n\n  <script> \n      var  additionalHours=0;\n      $(document).ready(function() {\n           $('#Checkout').prop('disabled', true);\n           $('#Checkout').style.display = \"none\" ;\n           $('#Checkout').style.visibility = \"hidden\" ;\n      });\n\n      function calculateFee() { \/\/ const plate = document.getElementById(\"plate\").value.trim();\n      const hours = parseInt(document.getElementById(\"hours\").value);\n      const outputDiv = document.getElementById(\"output\");\n      const submitButton = document.getElementById('Checkout');\n\n\n      if (isNaN(hours) || hours < 1) {\n        outputDiv.style.display = \"block\";\n        outputDiv.innerHTML = \"Please enter a valid license plate and parking duration (1 hour or more).\";\n        return;\n      }\n\n      submitButton.disabled = false;\n      submitButton.style.display = \"block\" ;\n      submitButton.style.visibility = \"visibility\";\n      const firstHourRate = 10;\n      const additionalHourRate = 5;\n\n      let totalCost = firstHourRate;\n      additionalHours = hours - 1;;\n      if (hours > 1) {\n        totalCost += (hours - 1) * additionalHourRate;\n      }\n\n      outputDiv.style.display = \"block\";\n      \/\/ outputDiv.innerHTML = `\n      \/\/   <strong>License Plate:<\/strong> ${plate}<br>\n      \/\/   <strong>Hours Parked:<\/strong> ${hours}<br>\n      \/\/   <strong>Total Fee:<\/strong> $${totalCost}\n      \/\/ `;\n      outputDiv.innerHTML = `\n        <strong>Hours Parked:<\/strong> ${hours}<br>\n        <strong>Total Fee:<\/strong> $${totalCost}\n      `;\n    }\n\n\n  document.getElementById('Checkout').addEventListener('click', function(e) {\n     CollectCheckout.redirectToCheckout({\n\n\n         lineItems : [\n\t {\n\t \tsku: \"100\",\n\t\tquantity: 1,\n         },\n         {\n\t \tsku: \"101\",\n\t\tquantity: additionalHours\n         }\n         ],\n\t type: \"auth\",\n         receipt: {\n\t\tshowReceipt: true,\n\t\tredirectToSuccessUrl: true\n\t },\n         \/\/ merchant_defined_field_1: \"1234\",\n\t fields: [\n           {\n              field: \"merchant_defined_field_1\",\n              required: true\n           },\n           {\n              field: \"merchant_defined_field_2\",\n              required: true\n           },\n           {\n              field: \"merchant_defined_field_3\",\n              required: true\n           }\n         ],\n         collectShippingInfo: false,\n\t successUrl: \"https:\/\/parkology-usa.com\/collectcheckoutdemo\/?transaction_id={TRANSACTION_ID}&vault_id={CUSTOMER_VAULT_ID}\",\n\t cancelUrl: \"https:\/\/parkology-usa.com\/collectcheckoutdemo\" }\n\t \/\/ successUrl: \"https:\/\/www.posinex.com\/collectcheckoutdemo\/?transaction_id={TRANSACTION_ID}&vault_id={CUSTOMER_VAULT_ID}\",\n\t \/\/ cancelUrl: \"https:\/\/jasminethaispringvale.com\/collectcheckoutdemo\" }\n    ).then((error) => {\n      console.log(\"key = \");\n      const scriptTag = document.getElementById(\"checkoutScript\");\n      const checkoutKey = scriptTag.dataset.checkoutKey;\n      console.log(checkoutKey);\n      console.log(error);\n    }); \n  });     \n\n\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Parking Fee Calculator Hours Parked: Calculate Fee Checkout [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/parkology-usa.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parkology-usa.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/parkology-usa.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/parkology-usa.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/parkology-usa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":4,"href":"https:\/\/parkology-usa.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/parkology-usa.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/parkology-usa.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}