{"id":26,"date":"2025-02-17T21:55:38","date_gmt":"2025-02-17T21:55:38","guid":{"rendered":"https:\/\/bezosbargainbooks.com\/?page_id=26"},"modified":"2025-02-23T18:33:45","modified_gmt":"2025-02-23T18:33:45","slug":"checkout","status":"publish","type":"page","link":"https:\/\/bezosbargainbooks.com\/index.php\/checkout\/","title":{"rendered":"Order Now"},"content":{"rendered":"\n<style>\n\n\/* Media query for larger screens *\/\n\/*@media (min-width: 768px) {\n  .quantity-row {\n    width: calc(100% - 80px);\n    max-width: 510px;\n\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 10px 15px;\n  }\n}*\/\n\n\/* Header styling *\/\n.site-header {\n  text-align: center;\n  padding: 20px 0;\n  background: white;\n}\n\n.site-title {\n  padding: 0;\n  font-size: clamp(1.725rem, 1.725rem + ((1vw - 0.48rem) * 1.106), 2.3rem);\n  font-style: italic;\n  font-weight: 900;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n  margin: 0;\n}\n\n\/* Quantity row styling *\/\n.quantity-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  \/*width: calc(100% - 80px);*\/\n\n  \/*position: sticky;*\/\n  top: 0;\n  \/*left: 50%;\n  transform: translateX(-50%);*\/\n  background-color: #f5f5f5;\n  padding: 10px 15px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  z-index: 1000;\n  box-sizing: border-box;\n  margin: 0 auto;\n}\n\n\n\/* Adjust container padding *\/\n.checkout-container {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 0 20px 20px 20px; \/* Remove top padding *\/\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n\/* Ensure quantity and price layout remains correct *\/\n.quantity-row > div {\n  flex: 0 1 auto;\n}\n\n.price-label {\n  white-space: nowrap;\n}\n.quantity-row-bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  max-width: 800px;\n  margin: 0 auto 20px auto;\n}\n\n.quantity-button {\n  background: #000;\n  color: #fff;\n  border: none;\n  width: 36px;\n  height: 36px;\n  border-radius: 6px;\n  font-size: 18px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n}\n\n.quantity-button:hover {\n  background: #333;\n}\n\n.quantity-input {\n  width: 80px;\n  padding: 8px;\n  text-align: center;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  font-size: 16px;\n  width: 40px;\n}\n\n.quantity-input::-webkit-inner-spin-button, \n.quantity-input::-webkit-outer-spin-button { \n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.quantity-input[type=number] {\n  -moz-appearance: textfield;\n}\n\n.age-warning {\n  text-align: center;\n  color: #dc3545;\n  font-size: 14px;\n  margin-bottom: 20px;\n  font-weight: 500;\n}\n\n\n\n\n.express-checkout {\n  margin-bottom: 40px;\n}\n\n.main-header {\n  text-align: center;\n  font-size: 2.3rem;\n  color: #333;\n  margin-bottom: 20px;\n  font-weight: 500;\n}\n\n.express-legend {\n  text-align: center;\n  font-size: 18px;\n  color: #333;\n  margin-bottom: 20px;\n  font-weight: 500;\n}\n\n.payment-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  align-items: center;\n  margin-bottom: 30px;\n}\n\n.pay-button {\n  padding: 15px 30px;\n  border-radius: 8px;\n  border: none;\n  font-size: 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  max-width: 300px;\n  justify-content: center;\n}\n\n.apple-pay {\n  background: #000;\n  color: #fff;\n}\n\n.google-pay {\n  background: #fff;\n  color: #000;\n  border: 1px solid #ccc;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n}\n\n.divider {\n  position: relative;\n  text-align: center;\n  margin: 30px 0;\n}\n\n.divider::before,\n.divider::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  width: calc(50% - 30px);\n  height: 1px;\n  background-color: #ddd;\n}\n\n.divider::before {\n  left: 0;\n}\n\n.divider::after {\n  right: 0;\n}\n\n.divider-text {\n  background: #fff;\n  padding: 0 20px;\n  color: #666;\n  font-size: 14px;\n}\n\n.checkout-form {\n  background: #fff;\n}\n\n.section-title {\n  font-size: 20px;\n  margin: 30px 0 20px;\n  font-weight: 500;\n  color: #333;\n}\n\n.form-row {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  margin-bottom: 20px;\n  width: 100%;\n}\n\n.form-input {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  font-size: 16px;\n  box-sizing: border-box;\n}\n\n.form-input::placeholder {\n  color: #666;\n}\n\n.form-input:focus {\n  outline: none;\n  border-color: #4a90e2;\n  box-shadow: 0 0 0 2px rgba(74,144,226,0.2);\n}\n\n.error-message {\n  color: #dc3545;\n  font-size: 14px;\n  margin-top: 5px;\n  display: none;\n}\n\n.submit-button {\n  background: #000;\n  color: #fff;\n  padding: 15px 30px;\n  border: none;\n  border-radius: 6px;\n  font-size: 16px;\n  cursor: pointer;\n  width: 100%;\n  margin-top: 20px;\n  transition: background-color 0.2s ease;\n}\n\n.submit-button:hover {\n  background: #333;\n}\n\n.invalid {\n  border-color: #dc3545;\n}\n\n.price-label {\n  \/*font-size: 16px;*\/\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.amount {\n  font-weight: bold;\n}\n\n.price-label span:first-child {\n  font-weight: bold;\n}\n\n\/* Media Queries for larger screens *\/\n@media (min-width: 768px) {\n  .payment-buttons {\n    flex-direction: row;\n    justify-content: center;\n  }\n  \n  .pay-button {\n    width: 250px;\n  }\n\n  .checkout-form {\n    \/*padding: 30px;*\/\n  }\n\n  .form-row {\n    flex-direction: row;\n  }\n  \n  .address-fields {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 15px;\n  }\n}\n\nlegend {\n  padding: 0.3em 0.7em;\n  color: gray;\n  font-size: 90%;\n  position: relative;\n  margin-left: auto;\n  margin-right: auto;\n  border-radius: 8px;\n}\nfieldset {\n  border:0.5px solid #ddd;\nborder-radius: 4px;\n}\n<\/style>\n<script>\n\nwindow.onload = function () {\n\n    \/* event listener *\/\n    document.getElementsByName(\"quantity\")[0].addEventListener('change', updatePrice);\n    document.getElementsByName(\"quantity-bottom\")[0].addEventListener('change', updatePrice);\n\n\n    function updatePrice() \n    {\n\tif (isNaN(this.value) || this.value < 1) {\n\t    this.value = 1;\n\t} \n\tconst value = parseInt(this.value);\n\tconsole.log(value);\n\tconst amount = value * 5;\n\tdocument.querySelectorAll('.amount').forEach(label => {\n\t    label.textContent = `\u00a3${amount}`;\n\t});\n\tdocument.getElementById(\"quantity\").value = this.value;\n\tdocument.getElementById(\"quantity-bottom\").value = this.value;\n    }\n\n}\n<\/script>\n\n<div class=\"checkout-container\">\n  <header class=\"site-header\">\n    <h1 class=\"site-title\">BEZOS&#8217; BARGAIN BOOKS<\/h1>\n  <\/header>\n\n  <div class=\"quantity-row\">\n    <div style=\"width: 200px;\">\n      <label for=\"quantity\" style=\"display: block; text-align: left;font-weight:bold;\">\n        Amount <input type=\"number\" id=\"quantity\" name=\"quantity\" class=\"quantity-input\" value=\"1\" min=\"1\" max=\"121\">\n      <\/label>\n    <\/div>\n    <div class=\"price-label\">\n      <span>Total<\/span>\n      <span class=\"amount\">\u00a35<\/span>\n    <\/div>\n  <\/div>\n\n\n  <fieldset>\n    <legend>\n    <h3 class=\"express-legend\">Express Checkout<\/h3>\n    <\/legend>\n    \n    <div class=\"express-checkout\">\n      <div class=\"payment-buttons\">\n        <button class=\"pay-button apple-pay\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M17.05 12.04c-.03-2.53 2.06-3.75 2.15-3.81-1.17-1.71-2.99-1.94-3.64-1.97-1.55-.16-3.03.91-3.82.91s-2.01-.89-3.3-.86c-1.7.02-3.26.99-4.13 2.51-1.76 3.05-.45 7.58 1.26 10.06.84 1.21 1.84 2.57 3.15 2.52 1.26-.05 1.74-.82 3.27-.82s1.96.82 3.3.79c1.36-.02 2.22-1.24 3.06-2.45.96-1.41 1.36-2.77 1.38-2.84-.03-.01-2.65-1.02-2.68-4.04zM14.79 7.04c.69-.84 1.16-2 1.03-3.16-.99.04-2.19.66-2.9 1.49-.64.74-1.2 1.92-1.05 3.06 1.11.09 2.24-.58 2.92-1.39z\"><\/path>\n          <\/svg>\n          Pay with Apple\n        <\/button>\n        <button class=\"pay-button google-pay\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M21.64 10.2h-9.6v3.6h5.4c-.5 2.5-2.6 3.6-5.4 3.6-3.3 0-6-2.7-6-6s2.7-6 6-6c1.5 0 2.9.5 4 1.5l2.8-2.8C17.14 2.3 14.44 1 11.54 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5 0 9.5-3.6 9.5-10 0-.3 0-.5-.1-.8z\" fill=\"#4285F4\"><\/path>\n            <path d=\"M3.54 7.6l3.2 2.4c.9-2.6 3.3-4.4 6.1-4.4 1.5 0 2.9.5 4 1.5l2.8-2.8C17.14 2.3 14.44 1 11.54 1c-4.4 0-8.1 2.8-9.5 6.6z\" fill=\"#EA4335\"><\/path>\n            <path d=\"M11.54 21c2.9 0 5.6-1.3 7.1-3.3l-3.3-2.6c-1.1 1-2.5 1.5-4.1 1.5-2.8 0-5.2-1.8-6.1-4.4l-3.2 2.4C3.44 18.2 7.14 21 11.54 21z\" fill=\"#34A853\"><\/path>\n            <path d=\"M21.54 10.2h-.1l-9.5.1v3.6h5.4c-.3 1.4-1 2.5-2 3.3l3.3 2.6c1.9-1.8 3-4.4 3-7.8 0-.3 0-.5-.1-.8z\" fill=\"#4285F4\"><\/path>\n          <\/svg>\n          Pay with Google\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/fieldset>\n\n  <div class=\"divider\">\n    <span class=\"divider-text\">Or<\/span>\n  <\/div>\n\n  <form id=\"checkoutForm\" class=\"checkout-form\">\n    <h3 class=\"section-title\">Contact<\/h3>\n    \n    <div class=\"form-row\">\n      <input type=\"email\" id=\"email\" class=\"form-input\" placeholder=\"Email address\" required=\"\">\n      <input type=\"email\" id=\"email_confirm\" class=\"form-input\" placeholder=\"Confirm Email address\" required=\"\" style=\"display:none;\">\n    <\/div>\n\n    <h3 class=\"section-title\">Shipping Address<\/h3>\n    \n    <div class=\"form-row\">\n      <input type=\"text\" id=\"firstName\" class=\"form-input\" placeholder=\"First name\" required=\"\">\n      <input type=\"text\" id=\"lastName\" class=\"form-input\" placeholder=\"Last name\" required=\"\">\n    <\/div>\n\n    <div class=\"form-row\">\n      <input type=\"text\" id=\"street\" class=\"form-input\" placeholder=\"Street address\" required=\"\">\n    <\/div>\n\n    <div class=\"form-row address-fields\">\n      <input type=\"text\" id=\"city\" class=\"form-input\" placeholder=\"City\" required=\"\">\n      <input type=\"text\" id=\"country\" class=\"form-input\" value=\"United Kingdom (UK)\" readonly=\"\">\n      <input type=\"text\" id=\"postalcode\" class=\"form-input\" placeholder=\"Postal code\" required=\"\">\n    <\/div>\n\n    <div class=\"form-row\">\n      <input type=\"tel\" id=\"phone\" class=\"form-input\" placeholder=\"Phone number\" required=\"\">\n    <\/div>\n\n    <div class=\"quantity-row-bottom\">\n    <div style=\"width: 200px;\">\n\t<label for=\"quantity-bottom\" style=\"display: block; text-align: left;font-weight:bold;\">Amount <input type=\"number\" id=\"quantity-bottom\" name=\"quantity-bottom\" class=\"quantity-input\" value=\"1\" min=\"1\" max=\"121\"><\/label>\n    <\/div>\n      <div class=\"price-label\">\n        <span>Total<\/span>\n        <span class=\"amount\">\u00a35<\/span>\n      <\/div>\n    <\/div>\n    <button type=\"submit\" class=\"submit-button\">Continue to Payment<\/button>\n  <\/form>\n<\/div>\n\n<script>\n\ndocument.getElementById('quantity').addEventListener('input', function() {\n  let value = parseInt(this.value);\n  if (isNaN(value) || value < 1) {\n    value = 1;\n    this.value = 1;\n  }\n  document.getElementById('quantity-bottom').value = value;\n  updatePrice(this);\n});\n\ndocument.getElementById('quantity-bottom').addEventListener('input', function() {\n  let value = parseInt(this.value);\n  console.log(value);\n  if (isNaN(value) || value < 1) {\n    value = 1;\n    this.value = 1;\n  }\n  document.getElementById('quantity').value = value;\n  updatePrice(this);\n});\n\ndocument.getElementById('checkoutForm').addEventListener('submit', function(e) {\n  e.preventDefault();\n  let isValid = true;\n  \n  const email = document.getElementById('email');\n  const emailConfirm = document.getElementById('email_confirm');\n  const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n  \n  if (!emailRegex.test(email.value)) {\n    email.classList.add('invalid');\n    isValid = false;\n  }\n  \n  if (!emailRegex.test(emailConfirm.value)) {\n    emailConfirm.classList.add('invalid');\n    isValid = false;\n  }\n  \n  if (email.value !== emailConfirm.value) {\n    email.classList.add('invalid');\n    emailConfirm.classList.add('invalid');\n    isValid = false;\n  }\n\n  const firstName = document.getElementById('firstName');\n  if (firstName.value.trim().length < 2) {\n    firstName.classList.add('invalid');\n    isValid = false;\n  }\n\n  \/\/ Last name validation\n  const lastName = document.getElementById('lastName');\n  if (lastName.value.trim().length < 2) {\n    lastName.classList.add('invalid');\n    isValid = false;\n  }\n\n  \/\/ Street validation\n  const street = document.getElementById('street');\n  if (street.value.trim().length < 5) {\n    street.classList.add('invalid');\n    isValid = false;\n  }\n\n  \/\/ City validation\n  const city = document.getElementById('city');\n  if (city.value.trim().length < 2) {\n    city.classList.add('invalid');\n    isValid = false;\n  }\n\n  \/\/ Postal code validation\n  const postalcode = document.getElementById('postalcode');\n  \/\/ UK postal code regex pattern\n  const ukPostcodeRegex = \/^[A-Z]{1,2}[0-9][A-Z0-9]? ?[0-9][A-Z]{2}$\/i;\n  if (!ukPostcodeRegex.test(postalcode.value.trim())) {\n    postalcode.classList.add('invalid');\n    isValid = false;\n  }\n\n  \/\/ Phone validation\n  const phone = document.getElementById('phone');\n  \/\/ UK phone number regex pattern\n  const ukPhoneRegex = \/^(?:(?:\\+44\\s?|0)(?:1|2|7|8)(?:\\d\\s?){9})$\/;\n  if (!ukPhoneRegex.test(phone.value.replace(\/\\s+\/g, ''))) {\n    phone.classList.add('invalid');\n    isValid = false;\n  }\n\n  if (isValid) {\n    \/\/ Form is valid, you can submit it to your server here\n    console.log('Form is valid, proceeding with submission');\n    \/\/ Add your form submission code here\n  }\n});\n\n\/\/ Add real-time validation\nconst inputs = document.querySelectorAll('.form-input');\ninputs.forEach(input => {\n  input.addEventListener('input', function() {\n    this.classList.remove('invalid');\n    \n    \/\/ Special handling for email confirmation\n    if (this.id === 'email' || this.id === 'email_confirm') {\n      const email = document.getElementById('email');\n      const emailConfirm = document.getElementById('email_confirm');\n      if (email.value && emailConfirm.value && email.value !== emailConfirm.value) {\n        emailConfirm.classList.add('invalid');\n      }\n    }\n  });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>BEZOS&#8217; BARGAIN BOOKS Amount Total \u00a35 Express Checkout Pay with Apple Pay with Google Or Contact Shipping Address Amount Total \u00a35 Continue to Payment<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/pages\/26"}],"collection":[{"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":35,"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/bezosbargainbooks.com\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}