{"id":421,"date":"2024-05-14T20:11:58","date_gmt":"2024-05-14T13:11:58","guid":{"rendered":"https:\/\/payment.tftwadmin.online\/?page_id=421"},"modified":"2024-05-14T20:33:35","modified_gmt":"2024-05-14T13:33:35","slug":"payment-page-2024-b","status":"publish","type":"page","link":"https:\/\/payment.tftwadmin.online\/index.php\/payment-page-2024-b\/","title":{"rendered":"PAYMENT PAGE 2024 B"},"content":{"rendered":"\n<script src=\"https:\/\/secure.groupisogateway.com\/token\/Collect.js\" data-tokenization-key=\"C4m5Eg-3Y63N3-WBjEs3-xTDpa2\" data-variant=\"inline\">\n\ndata-field-cvv-display = 'required'\n             data-field-ccnumber-selector = '#demoCcnumber'\n            data-field-ccnumber-title = 'Card Number'\n            data-field-ccnumber-placeholder = '0000 0000 0000 0000'\n            data-field-ccnumber-enable-card-brand-previews= 'true'\n            data-field-ccexp-selector = '#demoCcexp'\n            data-field-ccexp-title = 'Expiration Date'\n            data-field-ccexp-placeholder = '00 \/ 00'\n            data-field-cvv-display = 'required'\n            data-field-cvv-selector = '#demoCvv'\n            data-field-cvv-title = 'CVV Code'\n            data-field-cvv-placeholder = '***'\n<\/script>\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>Payment Form<\/title>\n<style>\n  \/* Basic styling for the form (you can customize this) *\/\n  form {\n    max-width: 500px;\n    margin: 0 auto;\n    padding: 20px;\n    border: 1px solid #ccc;\n  }\n\n  label {\n    display: block;\n    margin-bottom: 5px;\n  }\n\n  input[type=\"text\"], input[type=\"email\"], select {\n    width: 100%;\n    padding: 10px;\n    margin-bottom: 15px;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n  }\n\n  #totalPayment {\n    font-weight: bold;\n  }\n<\/style>\n<\/head>\n<body>\n\n  <table>\n                <tr>\n                    <td>First Name<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"fname\" value=\"Test\" \/><\/td>\n                <\/tr>\n                <tr>\n                    <td>Last Name<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"lname\" value=\"User\" \/><\/td>\n                <\/tr>\n                <tr>\n                    <td>Address<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"address\" value=\"123 Main Street\"><\/td>\n                <\/tr>\n                <tr>\n                    <td>City<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"city\" value=\"Beverley Hills\"><\/td>\n                <\/tr>\n                <tr>\n                    <td>State<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"state\" value=\"CA\"><\/td>\n                <\/tr>\n                <tr>\n                    <td>Zip<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"zip\" value=\"90210\"><\/td>\n                <\/tr>\n                <tr>\n                    <td>Country<\/td>\n                    <td><input size=\"30\" type=\"text\" name=\"country\" value=\"US\"><\/td>\n                <\/tr>\n              \n                <tr>\n                    <td>CC Number<\/td>\n                    <td id=\"ccnumber\"><\/td>\n                <\/tr>\n                <tr>\n                    <td>CC Exp<\/td>\n                    <td id=\"ccexp\"><\/td>\n                <\/tr>\n                <tr>\n                    <td>CVV<\/td>\n                    <td id=\"cvv\"><\/td>\n                <\/tr>\n            <\/table>\n<form>\n\n  <label for=\"amountPerPerson\">Amount Paying (per person):<\/label>\n  <input type=\"number\" id=\"amountPerPerson\" name=\"amountPerPerson\" min=\"0\" required>\n\n  <label for=\"numTravelers\">Number of Travelers:<\/label>\n  <input type=\"number\" id=\"numTravelers\" name=\"numTravelers\" min=\"1\" required>\n\n  <p>Total Payment: <span id=\"payButton\">0<\/span><\/p>\n\n  <button type=\"submit\">Submit<\/button>\n<\/form>\n\n<script>\n  \/\/ JavaScript for calculating and displaying the total payment\n  const amountPerPersonInput = document.getElementById(\"amountPerPerson\");\n  const numTravelersInput = document.getElementById(\"numTravelers\");\n  const totalPaymentSpan = document.getElementById(\"totalPayment\");\n\n  amountPerPersonInput.addEventListener(\"input\", updateTotalPayment);\n  numTravelersInput.addEventListener(\"input\", updateTotalPayment);\n\n  function updateTotalPayment() {\n    const amountPerPerson = parseFloat(amountPerPersonInput.value) || 0;\n    const numTravelers = parseInt(numTravelersInput.value) || 0;\n    const totalPayment = amountPerPerson * numTravelers;\n    totalPaymentSpan.textContent = totalPayment.toFixed(2); \n  }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Payment Form First Name Last Name Address City State Zip Country CC Number CC Exp CVV Amount Paying (per person): Number of Travelers: Total Payment: 0 Submit<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/pages\/421"}],"collection":[{"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/comments?post=421"}],"version-history":[{"count":14,"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/pages\/421\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/pages\/421\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/payment.tftwadmin.online\/index.php\/wp-json\/wp\/v2\/media?parent=421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}