Shopify Terms Checkbox Generator

{%- comment -%}
  Cart terms checkbox. Render this once inside your cart form, above the Checkout button:
  {% render 'terms-checkbox' %}

  It greys out and blocks a normal form submit until the box is checked.
  It CANNOT gate Shop Pay, PayPal, Google Pay or any other dynamic/express checkout button, since
  those submit straight to Shopify without running this page's JavaScript. For a check that also
  covers those, turn on Settings → Checkout → the "require customers to agree to your terms"
  option under Order processing alongside this snippet.
{%- endcomment -%}
{%- style -%}
  .ea-tc{margin:.75rem 0}
  .ea-tc__row{display:flex;align-items:flex-start;gap:.5rem;font-size:.9em;cursor:pointer}
  .ea-tc__row input{margin-top:.2em;accent-color:#1a1a1a}
  .ea-tc__row a{color:#1a1a1a}
  .ea-tc__error{color:#b3261e;font-size:.85em;margin:.35rem 0 0}
  button[disabled].ea-tc-disabled{opacity:.5;cursor:not-allowed}
{%- endstyle -%}
{%- liquid
  if shop.terms_of_service
    assign terms_link = '<a href="' | append: shop.terms_of_service.url | append: '" target="_blank" rel="noopener">' | append: shop.terms_of_service.title | downcase | append: '</a>'
  else
    assign terms_link = 'terms of service'
  endif
  if shop.privacy_policy
    assign privacy_link = '<a href="' | append: shop.privacy_policy.url | append: '" target="_blank" rel="noopener">' | append: shop.privacy_policy.title | downcase | append: '</a>'
  else
    assign privacy_link = 'privacy policy'
  endif
  if shop.refund_policy
    assign refund_link = '<a href="' | append: shop.refund_policy.url | append: '" target="_blank" rel="noopener">' | append: shop.refund_policy.title | downcase | append: '</a>'
  else
    assign refund_link = 'refund policy'
  endif
  assign label = "I have read and agree to the [terms] and [refund]"
  assign label = label | replace: '[terms]', terms_link | replace: '[privacy]', privacy_link | replace: '[refund]', refund_link
-%}
<div class="ea-tc" data-terms-checkbox>
  <label class="ea-tc__row">
    <input type="checkbox" id="ea-terms-checkbox-input" data-terms-input>
    <span>{{ label }}</span>
  </label>
  <p class="ea-tc__error" id="ea-terms-checkbox-error" hidden>Please confirm you agree to our terms before checking out.</p>
</div>

<script>
  (function () {
    var box = document.getElementById('ea-terms-checkbox-input');
    var error = document.getElementById('ea-terms-checkbox-error');
    if (!box) return;
    var form = box.closest('form');
    var button = form ? form.querySelector('[name="checkout"], [type="submit"]') : null;
    function sync() {
      if (true && button) {
        button.disabled = !box.checked;
        button.classList.toggle('ea-tc-disabled', !box.checked);
      }
      if (box.checked && error) error.hidden = true;
    }
    box.addEventListener('change', sync);
    sync();
    if (form) {
      form.addEventListener('submit', function (e) {
        if (!box.checked) {
          e.preventDefault();
          if (error) error.hidden = false;
          box.focus();
        }
      });
    }
  })();
</script>