secure checkout

<!DOCTYPE html>

<head>

<title>VitaAmrita – Secure Checkout</title>

<style>

:root {

--g1:#0F7A4E; --g2:#17A567; --g3:#1DC97C; --gpal:#EAF8F1; --gpale:#F4FCF8;

--org:#FF6B2B; --orgl:#FFF2EC;

--ink:#111B17; --mid:#3D5A48; --soft:#7A9688; --xsoft:#B8CFC5;

--border:#D1E8DC; --white:#FFFFFF; --cream:#F8FDFB;

--err:#D63B3B; --gold:#D4900A; --goldl:#FFF8E6;

--r:12px; --rs:8px;

--sh: 0 2px 16px rgba(15,122,78,0.10);

}

*{margin:0;padding:0;box-sizing:border-box;}

body{font-family:'Manrope',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;}

/* ───── HEADER ───── */

.hdr{background:var(--white);border-bottom:1px solid var(--border);padding:0 20px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:var(--sh);}

.hdr-logo{display:flex;align-items:center;gap:9px;}

.hdr-leaf{width:34px;height:34px;background:linear-gradient(135deg,var(--g1),var(--g3));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;}

.hdr-name{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:700;color:var(--g1);letter-spacing:-0.3px;}

.hdr-secure{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--soft);}

/* ───── STEPS BAR ───── */

.steps-bar{background:var(--white);padding:14px 20px;border-bottom:1px solid var(--border);}

.steps-inner{max-width:440px;margin:0 auto;display:flex;align-items:center;}

.stp{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}

.stp:not(:last-child)::after{content:'';position:absolute;top:14px;left:55%;width:90%;height:2px;background:var(--border);transition:background .4s;}

.stp.done:not(:last-child)::after,.stp.act:not(:last-child)::after{background:var(--g2);}

.stp-c{width:28px;height:28px;border-radius:50%;background:var(--border);color:var(--soft);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;position:relative;z-index:1;transition:all .3s;}

.stp.act .stp-c{background:var(--g1);color:#fff;box-shadow:0 0 0 4px rgba(15,122,78,.18);}

.stp.done .stp-c{background:var(--g2);color:#fff;}

.stp-l{font-size:10px;font-weight:700;color:var(--soft);margin-top:5px;text-align:center;white-space:nowrap;}

.stp.act .stp-l{color:var(--g1);}

/* ───── LAYOUT ───── */

.wrap{max-width:980px;margin:0 auto;padding:24px 16px 60px;display:grid;grid-template-columns:1fr 348px;gap:24px;align-items:start;}

@media(max-width:720px){.wrap{grid-template-columns:1fr;}.ord-panel{order:-1;}}

/* ───── CARD ───── */

.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:18px;}

.card-hd{padding:15px 22px;background:linear-gradient(90deg,var(--gpal),var(--white));border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}

.card-ico{width:30px;height:30px;background:var(--g1);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}

.card-ttl{font-size:15px;font-weight:800;color:var(--g1);}

.card-bd{padding:22px;}

/* ───── FORM ───── */

.fsec{display:none;}

.fsec.on{display:block;animation:up .4s ease;}

@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.fg{margin-bottom:16px;}

.fl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--mid);margin-bottom:5px;}

.fl span{color:var(--err);}

.fi{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--rs);font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink);background:var(--white);transition:all .25s;-webkit-appearance:none;}

.fi:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(23,165,103,.14);}

.fi.err{border-color:var(--err);}

.fi[readonly]{background:var(--cream);color:var(--soft);}

.fhint{font-size:11px;color:var(--soft);margin-top:3px;}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:13px;}

@media(max-width:400px){.frow{grid-template-columns:1fr;}}

/* ───── PAY OPTIONS ───── */

.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:20px;}

.popt{border:2px solid var(--border);border-radius:var(--r);padding:16px 12px;cursor:pointer;text-align:center;transition:all .3s;position:relative;background:var(--white);}

.popt:hover{border-color:var(--g3);background:var(--gpale);}

.popt.sel{border-color:var(--g1);background:var(--gpal);box-shadow:0 0 0 3px rgba(15,122,78,.10);}

.popt input{display:none;}

.pchk{display:none;position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--g1);border-radius:50%;color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;}

.popt.sel .pchk{display:flex;}

.pemo{font-size:28px;margin-bottom:7px;}

.pnm{font-size:13px;font-weight:800;color:var(--ink);}

.psb{font-size:11px;color:var(--soft);margin-top:2px;}

/* ───── QR BOX ───── */

.qr-box{border:1.5px dashed var(--g3);border-radius:var(--r);padding:24px 18px;text-align:center;background:var(--gpale);margin-bottom:18px;}

.qr-ttl{font-size:13px;font-weight:800;color:var(--mid);margin-bottom:2px;}

.qr-amt{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:700;color:var(--g1);margin-bottom:14px;line-height:1;}

#qrWrap{display:flex;justify-content:center;margin-bottom:14px;}

#qrWrap canvas,#qrWrap img{border-radius:10px;padding:10px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.12);}

.qr-apps{display:flex;justify-content:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}

.qr-app{font-size:11px;font-weight:700;color:var(--mid);background:#fff;border:1px solid var(--border);border-radius:5px;padding:4px 10px;}

.qr-uid{font-size:13px;font-weight:700;color:var(--g1);background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 14px;display:inline-block;margin-bottom:10px;letter-spacing:.4px;}

.qr-note{font-size:12px;color:var(--soft);line-height:1.6;}

/* Paid confirm */

.paid-box{background:var(--orgl);border:1.5px solid var(--org);border-radius:var(--r);padding:18px;margin-top:16px;}

.paid-q{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px;}

.paid-btns{display:flex;gap:10px;}

.pbtn-y,.pbtn-n{flex:1;padding:11px;border-radius:var(--rs);font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .25s;}

.pbtn-y{background:var(--g1);color:#fff;}

.pbtn-y:hover{background:var(--g2);}

.pbtn-n{background:#fff;color:var(--soft);border:1.5px solid var(--border);}

/* COD box */

.cod-box{background:var(--gpale);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px;}

.cod-ttl{font-size:14px;font-weight:800;color:var(--g1);margin-bottom:10px;}

.cod-li{list-style:none;}

.cod-li li{display:flex;gap:8px;font-size:13px;color:var(--mid);padding:4px 0;line-height:1.5;}

.cod-li li::before{content:'✓';color:var(--g2);font-weight:800;flex-shrink:0;}

/* ───── BUTTONS ───── */

.btn{width:100%;padding:14px;border-radius:var(--rs);font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;cursor:pointer;border:none;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:8px;}

.btn-green{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;box-shadow:0 4px 14px rgba(15,122,78,.28);}

.btn-green:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,122,78,.36);}

.btn-green:disabled{opacity:.55;cursor:not-allowed;transform:none;}

.btn-back{background:none;border:none;color:var(--soft);font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;padding:0;margin-bottom:18px;}

.btn-back:hover{color:var(--g1);}

.brow{margin-top:20px;display:flex;flex-direction:column;gap:10px;}

/* ───── ORDER PANEL ───── */

/* Product loading skeleton */

.skel{background:linear-gradient(90deg,#edf5f1 25%,#dff0e8 50%,#edf5f1 75%);background-size:200% 100%;animation:skel .9s infinite;border-radius:6px;}

@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.prod-card{display:flex;gap:13px;align-items:flex-start;background:var(--gpale);border-radius:var(--rs);padding:13px;margin-bottom:18px;border:1px solid var(--border);}

.prod-img{width:72px;height:72px;border-radius:9px;object-fit:cover;border:1px solid var(--border);flex-shrink:0;background:var(--gpal);}

.prod-img-ph{width:72px;height:72px;border-radius:9px;background:linear-gradient(135deg,var(--gpal),var(--gpale));display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;border:1px solid var(--border);}

.prod-nm{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.3;}

.prod-qty{font-size:12px;color:var(--soft);margin-bottom:5px;}

.prod-pr{font-size:17px;font-weight:800;color:var(--g1);}

.prod-mrp{font-size:12px;color:var(--xsoft);text-decoration:line-through;margin-left:4px;}

.prod-save{display:inline-block;background:var(--goldl);color:var(--gold);font-size:10px;font-weight:800;padding:2px 7px;border-radius:100px;margin-left:5px;}

.sum-lines{}

.sum-ln{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;border-bottom:1px solid var(--gpal);color:var(--mid);}

.sum-ln:last-child{border:none;}

.sum-ln.tot{padding:13px 0 4px;font-size:15px;font-weight:800;color:var(--ink);border-top:2px solid var(--border);border-bottom:none;}

.sum-ln.tot .sv{font-size:21px;color:var(--g1);}

.sl{font-weight:600;}

.sv{font-weight:700;}

.free{color:var(--g2);font-weight:800;}

/* Trust */

.trust{display:grid;grid-template-columns:repeat(3,1fr);padding:14px;border-top:1px solid var(--border);}

.tr-it{text-align:center;}

.tr-em{font-size:18px;margin-bottom:3px;}

.tr-tx{font-size:10px;font-weight:700;color:var(--soft);line-height:1.3;}

/* ───── LOADING / SUCCESS ───── */

.overlay{position:fixed;inset:0;background:rgba(255,255,255,.9);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:999;}

.spin{width:44px;height:44px;border:4px solid var(--border);border-top-color:var(--g1);border-radius:50%;animation:sp .7s linear infinite;margin-bottom:14px;}

@keyframes sp{to{transform:rotate(360deg)}}

.ov-tx{font-size:14px;font-weight:700;color:var(--g1);}

/* Success */

.succ{text-align:center;padding:36px 20px;}

.succ-ico{width:76px;height:76px;background:linear-gradient(135deg,var(--g1),var(--g3));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px;animation:pop .5s cubic-bezier(.34,1.56,.64,1);}

@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.succ-ttl{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--g1);margin-bottom:8px;}

.succ-msg{font-size:13px;color:var(--soft);line-height:1.7;margin-bottom:20px;}

.succ-id{background:var(--gpal);border:1px solid var(--border);border-radius:var(--rs);padding:13px;margin-bottom:20px;font-size:13px;color:var(--mid);}

.succ-id strong{display:block;font-size:18px;font-weight:800;color:var(--g1);}

.succ-steps{text-align:left;background:var(--cream);border-radius:var(--rs);padding:14px;margin-bottom:20px;}

.succ-step{display:flex;gap:8px;font-size:13px;color:var(--mid);padding:4px 0;}

/* Toast */

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--ink);color:#fff;padding:11px 20px;border-radius:100px;font-size:13px;font-weight:600;z-index:9999;transition:transform .4s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;}

.toast.err{background:var(--err);}

.toast.on{transform:translateX(-50%) translateY(0);}

</style>

</head>

<body>

<div class="ov-tx" id="ovTx">Processing your order…</div>

</div>

<div class="hdr-name">VitaAmrita</div>

</div>

<div class="hdr-secure">🔒 100% Secure Checkout</div>

</header>

<div class="stp act" id="s1"><div class="stp-c">1</div><div class="stp-l">Details</div></div>

<div class="stp" id="s2"><div class="stp-c">2</div><div class="stp-l">Payment</div></div>

<div class="stp" id="s3"><div class="stp-c">✓</div><div class="stp-l">Confirmed</div></div>

</div>

<div>

<div class="card-hd"><div class="card-ico">📦</div><div class="card-ttl">Delivery Details</div></div>

</div>

<label class="fl">Mobile Number <span>*</span></label>

</div>

<label class="fl">Email Address</label>

</div>

<label class="fl">Address Line 1 <span>*</span></label>

</div>

<label class="fl">Address Line 2</label>

</div>

</div>

<label class="fl">State <span>*</span></label>

</div>

</div>

<label class="fl">Country</label>

</div>

<button class="btn btn-green" onclick="toStep2()">Continue to Payment →</button>

</div>

</div>

<div class="card-hd"><div class="card-ico">💳</div><div class="card-ttl">Payment Method</div></div>

<div class="psb">GPay · PhonePe · Paytm</div>

</div>

<div class="pnm">Cash on Delivery</div>

<div class="psb">Pay when delivered</div>

</div>

<div class="qr-app">📱 Google Pay</div>

<div class="qr-app">📳 PhonePe</div>

<div class="qr-app">💙 Paytm</div>

<div class="qr-app">WhatsApp Pay</div>

</div>

<div class="qr-note">Open any UPI app → Scan QR → Pay the amount<br>Then tap <strong>"Yes, I have paid"</strong> below</div>

</div>

<div class="paid-q">✅ Have you completed the UPI payment?</div>

</div>

<div class="cod-ttl">💵 Cash on Delivery Selected</div>

<li>Pay cash when your order arrives at your door</li>

<li>Free delivery across India</li>

<li>Delivery in 5–7 working days</li>

<li>WhatsApp tracking updates on <span id="codPhone" style="font-weight:800"></span></li>

</ul>

</div>

<button class="btn btn-green" onclick="placeOrder('COD')">🏠 Place Order – Pay on Delivery</button>

</div>

</div>

<div class="succ-ttl">Order Confirmed!</div>

<div class="succ-msg">Your VitaAmrita order has been placed successfully.<br>You'll receive a WhatsApp confirmation shortly.</div>

Order ID

<div style="font-size:11px;margin-top:4px;color:var(--soft)">Save this for tracking</div>

</div>

<div class="succ-step">📦 Order confirmed & sent to warehouse</div>

<div class="succ-step">🚚 Delivery in 5–7 working days</div>

<div class="succ-step">📱 WhatsApp tracking on <strong id="succPhone"></strong></div>

</div>

<button class="btn btn-green" onclick="location.href='/'">← Back to VitaAmrita Store</button>

</div>

</div>

<div class="card-hd"><div class="card-ico">🛒</div><div class="card-ttl">Order Summary</div></div>

</div>

<div>

</div>

<div class="sum-ln"><span class="sl">Subtotal</span><span class="sv" id="sumSub">–</span></div>

<div class="sum-ln"><span class="sl">Shipping</span><span class="sv free" id="sumShip">🚚 FREE</span></div>

<div class="sum-ln"><span class="sl">Discount</span><span class="sv" id="sumDisc" style="color:var(--g2)">–</span></div>

<div class="sum-ln tot"><span class="sl">Total</span><span class="sv" id="sumTot">–</span></div>

</div>

<div class="tr-it"><div class="tr-em">🔒</div><div class="tr-tx">Secure<br>Payment</div></div>

<div class="tr-it"><div class="tr-em">🚚</div><div class="tr-tx">Free<br>Delivery</div></div>

<div class="tr-it"><div class="tr-em">↩️</div><div class="tr-tx">Easy<br>Returns</div></div>

</div>

<div style="font-size:13px;font-weight:700;color:var(--mid);margin-bottom:10px;">Need help with your order?</div>

<a href="https://wa.me/919009343700?text=Hi VitaAmrita, I need help with my order" target="_blank"

style="display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:10px 14px;border-radius:var(--rs);text-decoration:none;font-size:13px;font-weight:700;">

<span style="font-size:18px;">💬</span> Chat on WhatsApp

</a>

</div>

</div>

</div>

/* ══════════════════════════════════════════

⚙️ CONFIG (already set for you)

══════════════════════════════════════════ */

const C = {

upiId: '9893495444@ybl',

upiName: 'Rishabh Kumar Jain',

wa: '919009343700',

storeName: 'VitaAmrita'

};

/* ══════════════════════════════════════════

PRODUCT – auto-fetch from Shopify

Priority:

1. URL param ?variant=ID (from Buy Now button)

2. Cart items (from Add to Cart)

3. URL param ?handle=slug

══════════════════════════════════════════ */

let prod = { title:'Loading…', price:0, compareAt:0, variantId:null, image:null };

let qrDone = false;

async function loadProduct() {

const params = new URLSearchParams(location.search);

const variantId = params.get('variant');

const handle = params.get('handle');

try {

// Attempt 1: specific variant ID in URL

if (variantId) {

const r = await fetch(`/variants/${variantId}.json`);

if (r.ok) {

const d = await r.json();

const v = d.variant;

// Also get the full product for image

const r2 = await fetch(`/products/${v.product_id}.json`).catch(()=>null);

let img = null;

if (r2 && r2.ok) {

const d2 = await r2.json();

img = d2.product.images.length ? d2.product.images[0].src : null;

}

prod = {

title: v.title === 'Default Title' ? v.name || 'DiaVeda Powder' : v.title,

price: parseFloat(v.price),

compareAt: parseFloat(v.compare_at_price) || parseFloat(v.price) * 1.3,

variantId: v.id,

image: img

};

renderProd(); return;

}

// Attempt 2: cart items

const cartR = await fetch('/cart.json');

if (cartR.ok) {

const cart = await cartR.json();

if (cart.items && cart.items.length > 0) {

const item = cart.items[0];

prod = {

title: item.product_title,

price: item.final_price / 100,

compareAt: item.compare_at_price ? item.compare_at_price / 100 : (item.final_price / 100) * 1.3,

variantId: item.variant_id,

image: item.image

};

renderProd(); return;

}

// Attempt 3: handle in URL

if (handle) {

const r = await fetch(`/products/${handle}.json`);

if (r.ok) {

const d = await r.json();

const p = d.product, v = p.variants[0];

prod = {

title: p.title,

price: parseFloat(v.price),

compareAt: parseFloat(v.compare_at_price) || parseFloat(v.price) * 1.3,

variantId: v.id,

image: p.images.length ? p.images[0].src : null

};

renderProd(); return;

}

// Attempt 4: fetch first product in store

const allR = await fetch('/products.json?limit=10');

if (allR.ok) {

const all = await allR.json();

// Find a diabetes/ayurvedic product

const match = all.products.find(p =>

p.handle.includes('diaveda') || p.handle.includes('diabetes') || p.handle.includes('ayurvedic')

) || all.products[0];

if (match) {

const v = match.variants[0];

prod = {

title: match.title,

price: parseFloat(v.price),

compareAt: parseFloat(v.compare_at_price) || parseFloat(v.price) * 1.3,

variantId: v.id,

image: match.images.length ? match.images[0].src : null

};

renderProd(); return;

}

} catch(e) {

console.warn('Product fetch error:', e);

}

// Final fallback

prod = { title:'DiaVeda Ayurvedic Powder', price:1350, compareAt:1750, variantId:null, image:null };

renderProd();

}

function fmt(n) { return Number(n).toLocaleString('en-IN'); }

function renderProd() {

const save = Math.max(0, prod.compareAt - prod.price);

document.getElementById('prodNm').textContent = prod.title;

document.getElementById('prodPr').textContent = '₹' + fmt(prod.price);

document.getElementById('prodMrp').textContent = prod.compareAt > prod.price ? '₹' + fmt(prod.compareAt) : '';

document.getElementById('prodSave').textContent = save > 0 ? 'Save ₹' + fmt(save) : '';

document.getElementById('sumSub').textContent = '₹' + fmt(prod.price);

document.getElementById('sumDisc').textContent = save > 0 ? '– ₹' + fmt(save) : '–';

document.getElementById('sumTot').textContent = '₹' + fmt(prod.price);

document.getElementById('qrAmt').textContent = '₹' + fmt(prod.price);

if (prod.image) {

document.getElementById('prodImgWrap').innerHTML =

`<img class="prod-img" src="${prod.image}" alt="${prod.title}" onerror="this.parentNode.innerHTML='<div class=prod-img-ph>🌿</div>'">`;

}

// Regenerate QR with actual amount

if (qrDone) buildQR();

}

/* ══════════════════════════════════════════

QR CODE

══════════════════════════════════════════ */

let qrObj = null;

function buildQR() {

const upiStr = `upi://pay?pa=${C.upiId}&pn=${encodeURIComponent(C.upiName)}&am=${prod.price}&cu=INR&tn=${encodeURIComponent('VitaAmrita Order')}`;

const wrap = document.getElementById('qrWrap');

wrap.innerHTML = '';

qrObj = new QRCode(wrap, {

text: upiStr,

width: 200, height: 200,

colorDark: '#0F7A4E',

colorLight: '#FFFFFF',

correctLevel: QRCode.CorrectLevel.H

});

qrDone = true;

}

/* ══════════════════════════════════════════

STEP NAVIGATION

══════════════════════════════════════════ */

function setStep(n) {

for(let i=1;i<=3;i++){

const d=document.getElementById('s'+i);

d.classList.remove('act','done');

if(i<n) d.classList.add('done');

if(i===n) d.classList.add('act');

}

function toStep1() {

document.getElementById('step1').classList.add('on');

document.getElementById('step2').classList.remove('on');

setStep(1);

}

function toStep2() {

if (!validate()) return;

document.getElementById('codPhone').textContent = '+91 ' + document.getElementById('phone').value.trim();

document.getElementById('step1').classList.remove('on');

document.getElementById('step2').classList.add('on');

setStep(2);

buildQR();

window.scrollTo({top:0,behavior:'smooth'});

}

/* ══════════════════════════════════════════

PAYMENT SELECT

══════════════════════════════════════════ */

function selPay(m) {

document.getElementById('pUPI').classList.toggle('sel', m==='upi');

document.getElementById('pCOD').classList.toggle('sel', m==='cod');

document.getElementById('upiSec').style.display = m==='upi' ? 'block' : 'none';

document.getElementById('codSec').style.display = m==='cod' ? 'block' : 'none';

if (m==='upi' && !qrDone) buildQR();

}

function confirmUPI() { placeOrder('UPI'); }

/* ══════════════════════════════════════════

VALIDATION

══════════════════════════════════════════ */

function validate() {

const checks = [

['fullName','Full Name',2,null,false],

['phone','Phone Number',10,10,true],

['addr1','Address',5,null,false],

['city','City',2,null,false],

['state','State',2,null,false],

['pin','PIN Code',6,6,true]

];

for (const [id,lbl,min,exact,num] of checks) {

const el = document.getElementById(id);

const v = el.value.trim();

el.classList.remove('err');

if (!v || v.length < min) { el.classList.add('err'); toast(`Enter valid ${lbl}`,true); el.focus(); return false; }

if (exact && v.length !== exact) { el.classList.add('err'); toast(`${lbl} must be ${exact} digits`,true); el.focus(); return false; }

if (num && !/^\d+$/.test(v)) { el.classList.add('err'); toast(`${lbl} should be numeric`,true); el.focus(); return false; }

}

return true;

}

/* ══════════════════════════════════════════

PLACE ORDER → SYNC TO SHOPIFY

══════════════════════════════════════════ */

async function placeOrder(method) {

showOv('Placing your order…');

const o = {

name: document.getElementById('fullName').value.trim(),

phone: document.getElementById('phone').value.trim(),

email: document.getElementById('email').value.trim(),

addr1: document.getElementById('addr1').value.trim(),

addr2: document.getElementById('addr2').value.trim(),

city: document.getElementById('city').value.trim(),

state: document.getElementById('state').value.trim(),

pin: document.getElementById('pin').value.trim(),

method: method

};

try {

// 1. Clear cart

await fetch('/cart/clear.js', { method:'POST' }).catch(()=>{});

// 2. Add product to cart (only if variantId known)

if (prod.variantId) {

const ar = await fetch('/cart/add.js', {

method:'POST',

headers:{'Content-Type':'application/json'},

body: JSON.stringify({

items:[{

id: prod.variantId,

quantity: 1,

properties:{

'Payment Method': method === 'UPI' ? 'UPI – QR Code (Prepaid)' : 'Cash on Delivery',

'Phone': o.phone,

'Full Address': `${o.addr1}${o.addr2 ? ', '+o.addr2 : ''}, ${o.city}, ${o.state} – ${o.pin}`

}

}]

})

});

if (!ar.ok) {

const e = await ar.json();

throw new Error(e.description || 'Product not available');

}

// 3. Update cart note + attributes

const noteStr = `Name: ${o.name} | Phone: ${o.phone} | Payment: ${method} | Address: ${o.addr1}, ${o.city}, ${o.state} ${o.pin}`;

await fetch('/cart/update.js', {

method:'POST',

headers:{'Content-Type':'application/json'},

body: JSON.stringify({

note: noteStr,

attributes:{

'_cust_name': o.name,

'_cust_phone': o.phone,

'_cust_email': o.email,

'_cust_addr1': o.addr1,

'_cust_addr2': o.addr2,

'_cust_city': o.city,

'_cust_state': o.state,

'_cust_pin': o.pin,

'_payment': method,

'_source': 'VitaAmrita Custom Checkout'

}

})

}).catch(()=>{});

// 4. Build pre-filled checkout URL for Shopify

const email = o.email || `+91${o.phone}@vitaamrita.com`;

const fname = o.name.split(' ')[0];

const lname = o.name.split(' ').slice(1).join(' ') || ' ';

const qsp = new URLSearchParams({

'checkout[email]': email,

'checkout[shipping_address][first_name]': fname,

'checkout[shipping_address][last_name]': lname,

'checkout[shipping_address][address1]': o.addr1,

'checkout[shipping_address][address2]': o.addr2,

'checkout[shipping_address][city]': o.city,

'checkout[shipping_address][province]': o.state,

'checkout[shipping_address][zip]': o.pin,

'checkout[shipping_address][country]': 'India',

'checkout[shipping_address][phone]': '+91'+o.phone

});

hideOv();

showSuccess(o);

// 5. Auto-redirect to Shopify checkout to finalise (payment & order creation)

setTimeout(() => {

window.location.href = '/checkout?' + qsp.toString();

}, 4000);

} catch(err) {

hideOv();

toast('Error: ' + err.message, true);

console.error(err);

}

/* ══════════════════════════════════════════

SUCCESS SCREEN

══════════════════════════════════════════ */

function showSuccess(o) {

setStep(3);

document.getElementById('step2').classList.remove('on');

const oid = '#VA-' + Date.now().toString().slice(-6);

document.getElementById('succOID').textContent = oid;

document.getElementById('succPhone').textContent = '+91 ' + o.phone;

document.getElementById('succCard').style.display = 'block';

document.getElementById('succCard').scrollIntoView({behavior:'smooth'});

// WhatsApp notification to store owner

const msg = encodeURIComponent(

`🌿 *New VitaAmrita Order!*\n\n` +

`*ID:* ${oid}\n*Name:* ${o.name}\n*Phone:* ${o.phone}\n` +

`*Payment:* ${o.method}\n` +

`*Product:* ${prod.title}\n*Amount:* ₹${fmt(prod.price)}\n` +

`*Address:* ${o.addr1}, ${o.addr2 ? o.addr2+', ':'' }${o.city}, ${o.state} – ${o.pin}`

);

setTimeout(() => {

window.open(`https://wa.me/${C.wa}?text=${msg}`, '_blank');

}, 800);

}

/* ══════════════════════════════════════════

HELPERS

══════════════════════════════════════════ */

function showOv(t){ document.getElementById('ovTx').textContent=t||'Processing…'; document.getElementById('overlay').style.display='flex'; }

function hideOv(){ document.getElementById('overlay').style.display='none'; }

function toast(msg,err){

const t=document.getElementById('toast');

t.textContent=msg; t.className='toast'+(err?' err':'')+' on';

clearTimeout(t._t); t._t=setTimeout(()=>{t.className='toast';},3500);

}

// INIT

loadProduct();

</script>

</body>

</html>