Google site with mini e-commerce with QR pay

Perfect! Let’s upgrade your order form so the user can calculate totals AND pay instantly via UPI QR or Razorpay link — all embedded in the same Google Sites page. Here’s a ready-to-use HTML + JS snippet:

---

HTML + JavaScript Order Form with Payment

<div style="max-width:500px; margin:auto; font-family:sans-serif;">
  <h3>Place Your Order</h3>

  <table id="orderTable" style="width:100%; border-collapse: collapse;">
    <tr>
      <th style="border-bottom:1px solid #ccc;">Product Code</th>
      <th style="border-bottom:1px solid #ccc;">Quantity</th>
      <th style="border-bottom:1px solid #ccc;">Price (₹)</th>
      <th style="border-bottom:1px solid #ccc;">Subtotal (₹)</th>
    </tr>
    <tr>
      <td><input type="text" class="pcode" placeholder="GR01"></td>
      <td><input type="number" class="qty" value="1" min="1"></td>
      <td><input type="number" class="price" value="0" min="0"></td>
      <td class="subtotal">0</td>
    </tr>
  </table>

  <button onclick="addRow()" style="margin-top:10px;">Add Another Product</button>

  <h4>Total: ₹<span id="total">0</span></h4>

  <h4>Delivery Details</h4>
  <input type="text" id="name" placeholder="Your Name" style="width:100%; margin:5px 0;">
  <input type="text" id="phone" placeholder="Phone Number" style="width:100%; margin:5px 0;">
  <textarea id="address" placeholder="Delivery Address" style="width:100%; margin:5px 0;"></textarea>

  <h4>Payment</h4>
  <p>Scan UPI QR to pay or click Razorpay link</p>
  <img src="YOUR_UPI_QR_URL_HERE" alt="UPI QR Code" style="width:150px;">
  <br>
  <a href="#" id="razorpayLink" target="_blank" style="display:inline-block; margin-top:10px; padding:8px 12px; background:#0c6efd; color:white; text-decoration:none; border-radius:4px;">Pay via Razorpay</a>

  <button onclick="submitOrder()" style="margin-top:10px; display:block;">Submit Order</button>
</div>

<script>
function calculateTotal() {
  let total = 0;
  const rows = document.querySelectorAll("#orderTable tr:not(:first-child)");
  rows.forEach(row => {
    const qty = parseFloat(row.querySelector(".qty").value) || 0;
    const price = parseFloat(row.querySelector(".price").value) || 0;
    const subtotal = qty * price;
    row.querySelector(".subtotal").innerText = subtotal.toFixed(2);
    total += subtotal;
  });
  document.getElementById("total").innerText = total.toFixed(2);

  // Update Razorpay link dynamically
  const amount = total * 100; // Razorpay amount in paise
  document.getElementById("razorpayLink").href = `https://rzp.io/l/YOUR_RAZORPAY_LINK?amount=${amount}`;
}

// Add new product row
function addRow() {
  const table = document.getElementById("orderTable");
  const row = table.insertRow();
  row.innerHTML = `
    <td><input type="text" class="pcode" placeholder="Code"></td>
    <td><input type="number" class="qty" value="1" min="1"></td>
    <td><input type="number" class="price" value="0" min="0"></td>
    <td class="subtotal">0</td>
  `;
  row.querySelectorAll(".qty, .price").forEach(input => input.addEventListener("input", calculateTotal));
  calculateTotal();
}

// Listen for changes to recalc total
document.querySelectorAll(".qty, .price").forEach(input => input.addEventListener("input", calculateTotal));

function submitOrder() {
  calculateTotal();
  const rows = document.querySelectorAll("#orderTable tr:not(:first-child)");
  let orderDetails = "";
  rows.forEach((row, i) => {
    const code = row.querySelector(".pcode").value;
    const qty = row.querySelector(".qty").value;
    const price = row.querySelector(".price").value;
    orderDetails += `${i+1}. Code: ${code}, Quantity: ${qty}, Price: ₹${price}\n`;
  });
  const name = document.getElementById("name").value;
  const phone = document.getElementById("phone").value;
  const address = document.getElementById("address").value;
  const total = document.getElementById("total").innerText;

  const mailtoLink = `mailto:youremail@example.com?subject=New%20Order&body=Name:%20${encodeURIComponent(name)}%0APhone:%20${encodeURIComponent(phone)}%0AAddress:%20${encodeURIComponent(address)}%0AOrder:%0A${encodeURIComponent(orderDetails)}%0ATotal:%20₹${total}`;
  window.location.href = mailtoLink;
}
</script>

---

Instructions for You

1. Replace YOUR_UPI_QR_URL_HERE with your UPI QR image URL.

2. Replace YOUR_RAZORPAY_LINK with your Razorpay checkout link.

   • The script will automatically append the correct total amount in paise.

3. Embed this HTML snippet in Google Sites → Embed → Embed Code.

4. Users can:

   • Enter product codes, quantity, and price.

   • See total automatically.

   • Pay immediately via UPI QR scan or Razorpay button.

   • Submit the order to your email via mailto.

---

This is fully self-contained and gives your customers a seamless flow: calculate → pay → send order.

If you want, I can make a slightly fancier version that auto-generates the total in Razorpay payment link WITHOUT extra clicks so the user only has to click “Pay Now” — truly one-click checkout.

Do you want me to do that?