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: buttons need no API key at all - the button ID is a safe public token, and your secret key stays server-side

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 colours
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. 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
A small modal collects their details (name, email, phone, or a custom amount, depending on what you enabled)
They're redirected to the PayBridgeNP hosted checkout, where they pick eSewa, Khalti, or Fonepay and pay
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, colour, provider, and all other settings are controlled from your dashboard, so you can update them without touching your website.

Customization Options

The defaults live in the dashboard when you create or edit the button: label, amount, colour, provider pre-selection, customer fields (name, email, phone), return URL, and more. Change them there and every page using the button picks them up.

The embed also supports optional data attributes for page-specific overrides: data-label, data-amount (in paisa), and data-color restyle a single embed; data-collect-name, data-collect-email, and data-collect-phone control which details the modal asks for; and data-customer-name, data-customer-email, and data-customer-phone prefill them when you already know who's paying.

Using with React/Next.js

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

"use client";

export function PayButton({ buttonId }: { buttonId: string }) {
  return (
    <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 to know when someone pays. Two options:

Option A: The dashboard (no code) Every button payment shows up in your PayBridgeNP dashboard in real time, which is plenty for a low-volume page.

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("x-paybridgenp-signature") ?? "";
  
  // Verify with the SDK: await paybridge.webhooks.constructEvent(body, sig, secret)
  // 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. Buttons work in sandbox on the Free plan for testing; accepting live payments needs the Growth plan or above.