Embed a Pay Now Button on Any Website in Nepal

Sometimes you don't want a full checkout flow. You just want a "Pay Now" button on your landing page, portfolio site, or event registration page. PayBridgeNP's payment buttons make this possible with a single HTML snippet.

What Are Payment Buttons?

Payment buttons are embeddable widgets that turn any HTML page into a payment-capable page. They're:

Frontend-only - no backend server required
Hosted - the payment UI is served by PayBridgeNP
Configurable - set amount, description, redirect URL per button
Secure - your secret key never leaves your server (buttons use your publishable key)

Use Cases

Portfolio/freelance sites: "Book a consultation - NPR 2,000" button on your personal site.

Event pages: Simple registration pages with "Register - NPR 500" button, no ticketing platform needed.

Landing pages: Product launch pages where you sell a single item without a full e-commerce setup.

Donation pages: NPR donation button for NGOs or causes.

Course/tutorial sites: Simple "Buy Access - NPR 999" button before building a full LMS.

Creating a Payment Button

In your PayBridgeNP dashboard:

Go to Payment Buttons > New Button
Set the display name (e.g., "Pay NPR 1,500")
Set the amount (or leave as customer-entered)
Set success/cancel redirect URLs
Customize the button label and colors
Copy the embed snippet

Embedding on Your Site

Copy-paste the snippet from your dashboard into your HTML:

<script
  src="https://api.paybridgenp.com/js/v1/button.js"
  data-button-id="btn_abc123">
</script>

That's it — one tag, no extra attributes. The script fetches your button's configuration from PayBridgeNP and renders the button exactly as you set it up in the dashboard.

How It Works Behind the Scenes

Customer clicks the button
PayBridgeNP opens a secure checkout modal
Customer selects their preferred provider (eSewa, Khalti, Fonepay, ConnectIPS, or HamroPay) and pays
PayBridgeNP sends a webhook to your registered endpoint (if configured)
Customer is redirected to your success URL

The button ID links to your configuration stored in PayBridgeNP. The label, amount, color, provider, and all other settings are controlled from your dashboard — so you can update them without touching your website.

Customization Options

All customization is done through the dashboard when you create or edit the button — label, amount, color, provider pre-selection, customer fields (name, email, phone), return URL, and more. There are no HTML attributes to override; the embed snippet stays the same single data-button-id tag regardless of what you change in the dashboard.

Using with React/Next.js

Load the script once and drop the snippet anywhere in your JSX:

"use client";

import Script from "next/script";

export function PayButton({ buttonId }: { buttonId: string }) {
  return (
    <>
      <Script src="https://api.paybridgenp.com/js/v1/button.js" strategy="lazyOnload" />
      <script
        src="https://api.paybridgenp.com/js/v1/button.js"
        data-button-id={buttonId}
      />
    </>
  );
}

Handling Payments Without a Backend

The button is designed for zero-backend use cases, but you still want payment notifications. Two options:

Option A: Email notifications (no code) In your button settings, enable email notifications to receive an email every time someone pays.

Option B: Webhook to a serverless function Use a Vercel Edge Function, Cloudflare Worker, or any serverless endpoint to receive webhooks:

// /api/payment-webhook.ts (Next.js Route Handler)
export async function POST(req: Request) {
  const body = await req.text();
  const sig = req.headers.get("paybridge-signature") ?? "";
  
  // Verify signature...
  // Log payment, send thank-you email, etc.
  
  return Response.json({ received: true });
}

Conclusion

Payment buttons are the simplest way to add "pay now" to any web page in Nepal. No backend, no complex integration - just one script tag. For shareable links without embedding, see payment links.

Create your first payment button in under 5 minutes.