# Add event ticketing to a Next.js site

> To add ticketing to a Next.js site, call the Vihaya Events API from a route handler. Register the buyer, open Razorpay Checkout with the order Vihaya returns, then confirm with the payment id. Vihaya verifies the payment, issues the QR ticket and emails it. The whole flow is about 60 lines.

Last updated: 2026-10-04

## Key facts

- Next.js sites can use Vihaya Events as a complete ticketing backend.
- A paid booking is two API calls around Razorpay Checkout.
- A free booking is one API call and is confirmed immediately.
- Vihaya verifies every payment with Razorpay before confirming a booking.
- If the buyer closes the tab after paying, Vihaya’s webhook still confirms the booking.

## Step by step

### 1. List events in a server component

Fetch your events with your API key on the server. The key never reaches the browser.

```ts
const res = await fetch('https://events.vihaya.app/api/v1/events', {
  headers: { 'x-api-key': process.env.VIHAYA_API_KEY! },
  next: { revalidate: 300 },   // refresh every 5 minutes
});
const { data: events } = await res.json();
```

### 2. Add a booking route handler

One route forwards both booking calls to Vihaya with your key attached.

```ts
// app/api/book/route.ts — keeps your API key on the server
export async function POST(req: Request) {
  const { eventId, ...body } = await req.json();
  const res = await fetch(
    `https://events.vihaya.app/api/v1/events/${eventId}/register`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': process.env.VIHAYA_API_KEY!,
      },
      body: JSON.stringify(body),
    },
  );
  return Response.json(await res.json(), { status: res.status });
}
```

### 3. Open Razorpay Checkout and confirm

Phase one returns an order. Open Razorpay Checkout with it, then send the payment id back. A free event skips the checkout entirely.

```ts
// In your booking form (client component).
// Load https://checkout.razorpay.com/v1/checkout.js first.
const book = (body: object) =>
  fetch('/api/book', { method: 'POST', body: JSON.stringify(body) }).then(r => r.json());

const start = await book({ eventId, name, email, phone });

if (!start.orderId) {
  // Free event: already confirmed. Ticket email is on its way.
  return showSuccess(start.registrationId);
}

new window.Razorpay({
  key: start.key,              // public key, safe in the browser
  order_id: start.orderId,
  amount: start.amount,        // paise
  currency: start.currency,
  prefill: { name, email, contact: phone },
  handler: async (p) => {
    const done = await book({
      eventId,
      registrationId: start.registrationId,
      orderId: p.razorpay_order_id,
      paymentId: p.razorpay_payment_id,
      signature: p.razorpay_signature,
    });
    if (done.success) showSuccess(done.registrationId);
  },
}).open();
```

### 4. Optional: react to bookings

Set a webhook URL in the dashboard to receive a signed registration.confirmed event on every booking. Use it for your own email, CRM or Slack message.

## Questions

### Is there an npm package for the Vihaya Events API?

Yes. Install vihaya-sdk from npm and import VihayaClient. It covers listing events, booking and verifying payment. Everything else in the Vihaya Events API is plain REST with an x-api-key header.

### Do I need to handle the Razorpay webhook myself?

No. Vihaya Events receives the Razorpay webhook and confirms the booking even if the buyer closes the tab. You only send the payment id back from the Checkout handler. Vihaya ignores duplicate deliveries, so a booking is never confirmed twice.

### How do I test without real payments?

Create a test key in the Vihaya dashboard. Test keys only touch test events: no gateway call, no email and no fee. Swap in a live key when you launch.

### Does it work on Vercel and the edge runtime?

Yes. The Vihaya Events API is plain HTTPS and JSON, so any runtime with fetch can call it. That includes Vercel serverless functions, edge functions, Cloudflare Workers and Netlify. Keep the full API key in an environment variable on the server.

### What does Vihaya charge?

Free events cost nothing. Paid tickets carry a 1.75–4.5% Vihaya platform fee plus Razorpay's 3% gateway charge. The rate is fixed when the event is created and larger events get a lower rate. There is no monthly fee and API access is free.

## Related

- [Sell event tickets from a Lovable app](https://events.vihaya.app/developers/lovable)
- [Sell event tickets on your website without your own payment gateway](https://events.vihaya.app/developers/sell-tickets-without-payment-gateway)
- [An event ticketing API for India](https://events.vihaya.app/developers/ticketing-api-india)
- [Vihaya Events for developers](https://events.vihaya.app/developers)


---

Canonical URL: https://events.vihaya.app/developers/nextjs
Last updated: 2026-10-04
API reference: https://events.vihaya.app/docs
OpenAPI spec: https://events.vihaya.app/api/v1/openapi.json
Brief AI index: https://events.vihaya.app/llms.txt
Full AI index: https://events.vihaya.app/llms-full.txt