Buy It Now

{%- comment -%}
Buy It Now (skip cart) — paste into: Online Store > Themes > Customize > Product template > Add block > Custom liquid
{%- endcomment -%}

<div class="buy-now-wrap">
  <button id="buy-now-{{ product.id }}" class="buy-now-btn" type="button" aria-label="Buy it now">
    Buy it now
  </button>
  <span class="buy-now-msg" id="buy-now-msg-{{ product.id }}" style="display:none">Adding…</span>
</div>

<style>
  .buy-now-btn {
    display:inline-block; padding:0.9rem 1.25rem; border:none; border-radius:9999px;
    font-weight:600; cursor:pointer; width:auto; min-width:12rem;
  }
  .buy-now-btn[disabled]{opacity:.6; cursor:not-allowed}
</style>

<script>
(function() {
  var btn = document.getElementById('buy-now-{{ product.id }}');
  var msg = document.getElementById('buy-now-msg-{{ product.id }}');

  function getCurrentVariantId() {
    // 1) Try to read the variant input from the theme's add-to-cart form
    var variantInput = document.querySelector('form[action^="/cart/add"] [name="id"]');
    if (variantInput && variantInput.value) return parseInt(variantInput.value, 10);

    // 2) Fallback to the first available variant from Liquid
    return {{ product.selected_or_first_available_variant.id | json }};
  }

  function getSellingPlan() {
    // If your product has subscriptions or selling plans, try to capture the selected plan ID.
    var sp = document.querySelector('form[action^="/cart/add"] [name="selling_plan"]');
    if (sp && sp.value) return parseInt(sp.value, 10);
    var spAlt = document.querySelector('form[action^="/cart/add"] [name="selling_plan"] option:checked');
    if (spAlt && spAlt.value) return parseInt(spAlt.value, 10);
    return null;
  }

  function setBusy(state){
    if (!btn) return;
    btn.disabled = state;
    if (msg) msg.style.display = state ? 'inline' : 'none';
  }

  btn && btn.addEventListener('click', function(e){
    e.preventDefault();
    var variantId = getCurrentVariantId();
    if (!variantId) { alert('Please select a variant.'); return; }

    var payload = { id: variantId, quantity: 1 };
    var sellingPlanId = getSellingPlan();
    if (sellingPlanId) payload.selling_plan = sellingPlanId;

    setBusy(true);

    fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type':'application/json', 'Accept':'application/json' },
      body: JSON.stringify(payload),
      credentials: 'same-origin'
    })
    .then(function(res){
      if(!res.ok) throw res;
      return res.json();
    })
    .then(function(){
      window.location.href = '/checkout';
    })
    .catch(function(){
      alert('Could not add to checkout. Please ensure a variant is selected.');
    })
    .finally(function(){ setBusy(false); });
  });
})();
</script>