Start free Open dashboard
Menu

Razorpay revenue analytics for Next.js

This guide adds ProductLense to a Next.js site and connects Razorpay, so every Razorpay payment is attributed to the channel, campaign and landing page that first brought the customer. It takes four steps and about ten minutes.

1. Add ProductLense to Next.js

The script goes in app/layout.tsx with next/script. Replace SITE_ID with the id from Settings → Sites.

app/layout.tsx
import Script from 'next/script';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.productlense.app/a.js"
          data-site="SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

2. Identify signed-in users

app/productlense-identify.tsx
'use client';
import { useEffect } from 'react';

declare global {
  interface Window {
    productlense?: (...args: unknown[]) => void;
  }
}

export function ProductLenseIdentify({ userId, email }: { userId?: string; email?: string }) {
  useEffect(() => {
    if (userId) window.productlense?.('identify', userId, email ? { email } : undefined);
  }, [userId, email]);
  return null;
}

3. Connect Razorpay

Setup steps

  1. In Razorpay, open Account & Settings → API Keys and generate a live key pair.
  2. In ProductLense, open Settings → Billing connections → Razorpay and paste the key id and secret.
  3. In Razorpay Dashboard → Webhooks, add a webhook endpoint with the URL ProductLense shows after you save the connection (pattern https://api.productlense.app/api/webhooks/{provider}/{connection_id}).
  4. Set a webhook secret, tick the events listed below, and paste the same secret into ProductLense.
  5. ProductLense backfills 12 months of payments and refunds. INR amounts are converted to USD at the ECB daily rate and kept in INR too.

Credentials and permissions

FieldSecretWhere to find it
Key IDNorzp_live_... from Razorpay Dashboard → Account & Settings → API Keys.
Key secretYes, encrypted at restThe secret paired with the key id.
Webhook secretYes, encrypted at restThe secret you set when creating the webhook in Razorpay Dashboard → Webhooks.

Webhook

URL pattern, shown with your connection id after you save:

text
https://api.productlense.app/api/webhooks/razorpay/{connection_id}

Events: payment.captured, payment.failed, refund.processed, subscription.activated, subscription.charged, subscription.cancelled

Verification: X-Razorpay-Signature header: HMAC-SHA256 of the raw body.

What ProductLense reads

Customers
Customers with email.
Subscriptions
Subscriptions; each plan is fetched once and cached for its amount and interval.
Payments
Captured payments.
Refunds
Processed refunds.
Fees
The fee on each payment, which includes GST.

What ProductLense never touches

  • Never creates, changes, refunds or cancels anything: read-only API calls and incoming webhooks only.
  • Never moves money, issues payouts, or reads bank account details.
  • Never sees full card numbers; providers do not expose them.
  • Never sends your customer data to the AI model: Ask and the daily insight see aggregates only.

Match payments to your users

Add pl_user_id to the notes of Razorpay customers or payments to match by id rather than email.

browser: Razorpay Checkout options
const rzp = new Razorpay({
  key: 'rzp_live_...',
  order_id: order.id,
  prefill: { email: user.email },
  notes: { pl_user_id: user.id },
});
rzp.open();

Razorpay on Next.js: questions

Where does the ProductLense script go in Next.js?
In app/layout.tsx with next/script. Add the Script component to app/layout.tsx with strategy="afterInteractive" and data-site. The script is about 2.3 KB, loads with defer, sets no cookies, and records route changes in single-page apps through the history API, so no extra router code is needed.
How do I identify users in Next.js?
Call window.productlense('identify', userId) once the signed-in user is known, as in the app/productlense-identify.tsx example on this page. Use the same id you store on Razorpay as pl_user_id, so Razorpay payments match by id rather than by email.
Does ProductLense work with Razorpay?
Yes. ProductLense connects to Razorpay with key ID, key secret, webhook secret, backfills 12 months of history, and stays current through signed webhooks plus a nightly reconcile. One connection is included on Starter; Growth and Scale allow every provider at once on the same site.
What data does ProductLense read from Razorpay?
Customers, subscriptions, payments, refunds and fees, read-only. Payments: captured payments. Refunds: processed refunds. Fees: the fee on each payment, which includes GST.
Can ProductLense change anything in my Razorpay account?
No. ProductLense only makes read calls and receives webhooks. It never creates, changes, refunds or cancels anything, never moves money, and never sees card numbers. Credentials are encrypted at rest, and the AI features only ever see aggregated numbers, never your customers’ data.

Free up to 10k events a month. No card.

Add the script, connect Stripe or any of 14 other billing providers, and see revenue by channel the same day.

Start free Read the docs →