How to Add an Embeddable UPI Payment Button to Any Static HTML Website (Zero Backend Required)
Millions of creators, open-source developers, and designers host their portfolios, software documentation, and landing pages on static hosting platforms like GitHub Pages, Netlify, Vercel, Carrd, Framer, and Cloudflare Pages. Because these websites lack server-side runtimes like PHP, Python, or Node.js, accepting online payments has traditionally required expensive third-party SaaS widgets or complex serverless functions. In this comprehensive developer guide, we demonstrate how to add an embeddable UPI payment button and checkout modal to any static HTML website in under 5 minutes without writing a single line of backend infrastructure.
How do you add a UPI payment button to a static HTML website? To add an embeddable UPI payment button to any static website, generate a Payment Link in your FamGateway Merchant Dashboard with your product name and price. You can either embed a styled HTML anchor tag (<a href="https://famgateway.in/pay.php?link=..." class="upi-pay-btn">Pay with UPI</a>) or include a lightweight Vanilla JavaScript modal snippet. When visitors click the button, FamGateway dynamically displays a real-time UPI QR code for desktop users and 1-tap mobile UPI intent buttons (Google Pay, PhonePe, Paytm, FamPay) with 0% transaction commission and zero GST needed.
- Step 1 (Generate Link): In your FamGateway Payment Links Dashboard, click "Create New Link". Define the title (e.g. "E-Book: Master Web Design"), amount (e.g. INR 299), and success redirect URL.
- Step 2 (Select Display Mode): Choose between a standalone direct-redirect button or an in-page modal popup.
- Step 3 (Paste & Publish): Copy the responsive HTML/CSS snippet below into your static template. When published, customer payments settle real-time into your personal UPI ID.
1. System Architecture: Static Site Payment Flow
The diagram below illustrates how static sites delegate transaction lifecycle management to FamGateway's hosted checkout edge:
2. Method 1: Responsive HTML & CSS "Pay with UPI" Button
Paste the following code into your HTML template. Replace YOUR_PAYMENT_LINK_SLUG with your live link slug from the FamGateway dashboard:
<!-- 1. Modern CSS Button Styles -->
<style>
.fam-upi-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 600;
padding: 14px 28px;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: none;
}
.fam-upi-button:hover {
background: linear-gradient(135deg, #1d4ed8, #1e40af);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}
.fam-upi-button:active {
transform: translateY(0);
}
.fam-upi-icon {
width: 22px;
height: 22px;
fill: currentColor;
}
</style>
<!-- 2. HTML Button Element -->
<a href="https://famgateway.in/pay.php?link=YOUR_PAYMENT_LINK_SLUG" target="_blank" rel="noopener noreferrer" class="fam-upi-button">
<svg class="fam-upi-icon" viewBox="0 0 24 24">
<path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.8L19.2 8 12 11.2 4.8 8 12 4.8zM4 9.8l7 3.1v6.3l-7-3.5V9.8zm9 9.4v-6.3l7-3.1v5.9l-7 3.5z"/>
</svg>
Pay INR 299 with UPI (GPay / PhonePe / FamPay)
</a>
3. Method 2: Embeddable In-Page Checkout Modal (Vanilla JavaScript)
If you prefer keeping users on your static page without redirecting them to an external tab, embed this lightweight (under 2KB) modal script:
<!-- FamGateway Lightweight In-Page Modal -->
<button id="open-upi-modal-btn" class="fam-upi-button">
<svg class="fam-upi-icon" viewBox="0 0 24 24">
<path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.8L19.2 8 12 11.2 4.8 8 12 4.8zM4 9.8l7 3.1v6.3l-7-3.5V9.8zm9 9.4v-6.3l7-3.1v5.9l-7 3.5z"/>
</svg>
Purchase Access • INR 299
</button>
<!-- Modal Overlay & Container -->
<div id="fam-modal-backdrop" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.75); backdrop-filter:blur(4px); z-index:99999; align-items:center; justify-content:center;">
<div style="background:#ffffff; border-radius:16px; width:90%; max-width:440px; height:620px; position:relative; box-shadow:0 25px 50px -12px rgba(0,0,0,0.25); overflow:hidden; display:flex; flex-direction:column;">
<button id="fam-modal-close" style="position:absolute; top:12px; right:12px; z-index:10; background:#f1f5f9; border:none; width:32px; height:32px; border-radius:50%; font-size:18px; cursor:pointer; color:#475569;">×</button>
<iframe id="fam-checkout-frame" src="" style="width:100%; height:100%; border:none;"></iframe>
</div>
</div>
<script>
const modalBackdrop = document.getElementById('fam-modal-backdrop');
const modalFrame = document.getElementById('fam-checkout-frame');
const openBtn = document.getElementById('open-upi-modal-btn');
const closeBtn = document.getElementById('fam-modal-close');
// Replace with your FamGateway payment link
const checkoutUrl = "https://famgateway.in/pay.php?link=YOUR_PAYMENT_LINK_SLUG&embed=true";
openBtn.addEventListener('click', () => {
modalFrame.src = checkoutUrl;
modalBackdrop.style.display = 'flex';
});
closeBtn.addEventListener('click', () => {
modalBackdrop.style.display = 'none';
modalFrame.src = "";
});
modalBackdrop.addEventListener('click', (e) => {
if (e.target === modalBackdrop) {
modalBackdrop.style.display = 'none';
modalFrame.src = "";
}
});
</script>
4. Method 3: Static Edge Functions (Cloudflare Pages / Netlify / Vercel)
If your static site uses modern Jamstack hosting (Cloudflare Pages, Netlify, or Vercel), you can generate dynamic orders on-the-fly using edge functions without maintaining a traditional server. Below is a production Cloudflare Pages / Netlify serverless function:
// functions/api/create-order.js (Cloudflare Pages or Netlify Function)
export async function onRequestPost(context) {
const { request, env } = context;
const body = await request.json();
const apiKey = env.FAMGATEWAY_API_KEY;
const amount = body.amount || "199.00";
const response = await fetch("https://famgateway.in/api/create-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Api-Key": apiKey
},
body: JSON.stringify({
amount: parseFloat(amount).toFixed(2),
customer_name: body.customer_name || "Static Site Visitor",
redirect_url: "https://yourwebsite.com/thank-you.html",
webhook_url: "https://your-webhook-forwarder.com/api/callback",
custom_id: `STATIC_${Date.now()}`
})
});
const data = await response.json();
return new Response(JSON.stringify(data), {
headers: { "Content-Type": "application/json" }
});
}
5. Static Platform Compatibility Matrix
FamGateway's embeddable payment architecture is 100% compatible across all modern static hosting environments:
| Hosting Platform | Setup Complexity | Supported Modes | Zero-GST Supported? |
|---|---|---|---|
| GitHub Pages | Under 2 minutes | Direct Button & In-Page Modal | Yes |
| Netlify / Vercel | Under 2 minutes | Direct Button, Modal, & Serverless | Yes |
| Carrd / Framer / Webflow | No-Code Embed Widget | Direct Link / HTML Embed | Yes |
| Astro / Hugo / Jekyll | Under 3 minutes | Component or Markdown Link | Yes |
6. Dynamic Custom Amount & Tip Jar Widget (Vanilla JS)
If you run an open-source project or content blog and want to accept custom tips or voluntary donations (e.g. INR 50, INR 100, or custom amounts), embed this interactive UI component:
<!-- Tip Jar Component -->
<div style="background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; padding:20px; max-width:380px; box-shadow:0 4px 12px rgba(0,0,0,0.05); font-family:system-ui, -apple-system, sans-serif;">
<h4 style="margin:0 0 12px; color:#0f172a; font-size:18px;">Support My Open-Source Work</h4>
<p style="color:#64748b; font-size:14px; margin:0 0 16px;">Zero platform fees. 100% of your contribution reaches me directly via UPI.</p>
<div style="display:flex; gap:8px; margin-bottom:14px;">
<button type="button" onclick="setTip(50)" style="flex:1; padding:8px; border:1px solid #cbd5e1; border-radius:6px; background:#f8fafc; font-weight:600; cursor:pointer;">₹50</button>
<button type="button" onclick="setTip(100)" style="flex:1; padding:8px; border:1px solid #cbd5e1; border-radius:6px; background:#f8fafc; font-weight:600; cursor:pointer;">₹100</button>
<button type="button" onclick="setTip(250)" style="flex:1; padding:8px; border:1px solid #cbd5e1; border-radius:6px; background:#f8fafc; font-weight:600; cursor:pointer;">₹250</button>
</div>
<input type="number" id="tip-amount" value="100" min="1" placeholder="Custom Amount (INR)" style="width:100%; box-sizing:border-box; padding:10px; border:1px solid #cbd5e1; border-radius:6px; font-size:15px; margin-bottom:14px;">
<button type="button" onclick="checkoutTip()" class="fam-upi-button" style="width:100%; justify-content:center;">Send UPI Contribution</button>
</div>
<script>
function setTip(val) {
document.getElementById('tip-amount').value = val;
}
function checkoutTip() {
const amt = parseFloat(document.getElementById('tip-amount').value) || 50;
// Redirect to dynamic FamGateway payment link with amount parameter
const baseUrl = "https://famgateway.in/pay.php?link=YOUR_TIP_LINK_SLUG";
window.open(`${baseUrl}&amount=${amt.toFixed(2)}`, '_blank');
}
</script>
7. Automated Digital File Delivery on Static Sites (Cloudflare Workers)
What if you sell a PDF guide or digital asset on your static site and want to email the download link automatically upon payment? You can deploy this free Cloudflare Worker to handle FamGateway's HMAC-signed webhook:
// cloudflare-worker-webhook.js
export default {
async fetch(request, env) {
if (request.method !== "POST") {
return new Response("Method Not Allowed", { status: 405 });
}
const rawBody = await request.text();
const signature = request.headers.get("X-FamGateway-Signature") || "";
// Verify cryptographic HMAC-SHA256 signature using Web Crypto API
const key = await crypto.subtle.importKey(
"raw",
new TextEncoder().encode(env.FAMGATEWAY_API_KEY),
{ name: "HMAC", hash: "SHA-256" },
false,
["sign"]
);
const signedBuf = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(rawBody));
const expectedSig = Array.from(new Uint8Array(signedBuf))
.map(b => b.toString(16).padStart(2, "0"))
.join("");
if (signature !== expectedSig) {
return new Response("Signature mismatch", { status: 401 });
}
const payload = JSON.parse(rawBody);
if (payload.status === "success") {
const customerEmail = payload.customer_email;
const utr = payload.utr;
// Dispatch digital product via email API (e.g. Resend / SendGrid)
await fetch("https://api.resend.com/emails", {
method: "POST",
headers: {
"Authorization": `Bearer ${env.RESEND_API_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
from: "[email protected]",
to: customerEmail,
subject: "Your Digital Download is Ready!",
html: `<p>Thank you for your payment! Bank UTR: ${utr}</p><p><a href="https://yourdomain.com/files/secret-ebook.pdf">Download E-Book</a></p>`
})
});
}
return new Response(JSON.stringify({ status: "ok" }), {
headers: { "Content-Type": "application/json" }
});
}
};
8. Frequently Asked Questions
Yes. By creating a pre-configured Payment Link in the FamGateway Merchant Dashboard, you can embed a clean HTML button or JavaScript modal on any static website (GitHub Pages, Netlify, Vercel, Carrd, Hugo, Astro). When clicked, it opens FamGateway's secure hosted checkout page where customers pay via any UPI app with zero GST registration required.
No. FamGateway handles the entire order lifecycle, QR code generation, and bank receipt verification on its secure hosted checkout page (https://famgateway.in/pay.php). Once the customer pays, funds land directly in your personal bank account, and both you and the customer receive instant email confirmation containing an official MSME-registered PDF receipt.
FamGateway Payment Links support both models: you can create a fixed-price payment button (e.g. for an ebook priced at INR 199) or an open-ended donation/tip button where customers enter their own amount on your static page.
Any platform that supports HTML or external hyperlinks, including GitHub Pages, Netlify, Vercel, Cloudflare Pages, Carrd, Webflow, Framer, Wix, Squarespace, and vanilla HTML/CSS websites.
No. FamGateway operates on a 100% free model with 0% MDR (Merchant Discount Rate). 100% of the customer's payment settles peer-to-peer into your connected personal UPI ID (@fam) without escrow withholding.
Yes. You can use our lightweight Vanilla JavaScript modal overlay script (under 2KB) to embed the FamGateway checkout experience inside a stylish glassmorphic modal directly on your static site.
Related Developer Guides & Resources
How to Integrate FamPay UPI Payment Gateway in SMM Panels (Rental, Perfect Panel & SmartPanel)
Step-by-step developer guide to integrating FamPay UPI payment gateway in SMM panels (Rental, Perfect Panel...
How to Accept UPI Payments on WooCommerce Without GST or Current Account (2026 Guide)
Complete tutorial on accepting automated UPI payments on WooCommerce without GST or a commercial current ac...
How to Accept Automated UPI Payments in Telegram Bots (Python & Node.js Guide)
Step-by-step tutorial on accepting automated UPI payments in Telegram shop bots using Python (FastAPI) and ...