Add event ticketing to a Next.js site

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. 1

   List events in a server component

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

   app/events/page.tsx

   Copy

   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. 2

   Add a booking route handler

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

   app/api/book/route.ts

   Copy

   // 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. 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.

   BookButton.tsx

   Copy

   // 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. 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

Guides for other tools

• v0
• Bolt
• Replit
• Cursor
• Windsurf
• Claude Code
• GitHub Copilot
• Webflow
• WordPress
• Framer, Wix, Squarespace

More guides

• Sell event tickets from a Lovable app
• Sell event tickets on your website without your own payment gateway
• An event ticketing API for India
• Vihaya Events for developers