Quickstart
Next.js Quickstart
Pull live PayPulse metrics into a Next.js app in under 10 minutes.
Next.js Quickstart
This guide walks through hitting the PayPulse API from a Next.js server component. The same pattern works for any Node, Bun, or edge runtime.
1. Store your key
Put your PayPulse key in .env.local:
PAYPULSE_API_KEY=pp_live_...Never embed the key in a client component — it is server-side only.
2. Fetch a snapshot
Create app/dashboard/page.tsx:
async function getMrr() {
const res = await fetch("https://paypulseapp.com/v1/metrics/current", {
headers: { Authorization: `Bearer ${process.env.PAYPULSE_API_KEY}` },
next: { revalidate: 300 }, // re-fetch every 5 minutes
})
if (!res.ok) throw new Error("PayPulse API error")
return res.json()
}
export default async function Dashboard() {
const { data } = await getMrr()
return (
<main>
<h1>${(data.mrr_cents / 100).toLocaleString()} MRR</h1>
<p>{data.active_subscriptions} active subs</p>
</main>
)
}That is it. PayPulse handles the Stripe / Braintree polling, churn math, and grace-period accounting — your app just reads numbers.
3. Time series
For chart data, hit /v1/metrics/timeseries:
const res = await fetch(
"https://paypulseapp.com/v1/metrics/timeseries?metric=mrr&start_date=2026-01-01",
{ headers: { Authorization: `Bearer ${process.env.PAYPULSE_API_KEY}` } },
)The response is an array of { date, metric, value, currency } points.