How to Integrate Eventbrite with V0

Use V0 to generate the event listing components before writing API code. A well-designed events page has three distinct views: the events grid/list overview, an individual event detail page, and optionally an event organizer admin view. For the public-facing events grid, describe the event card design in detail: event image, name, date/time formatted naturally ('Tuesday, April 15 at 7:00 PM'), venue name and city, ticket price range, remaining spots indicator, and a call-to-action button. Ask V0 to include a 'Sold Out' state with a disabled button. For filtering and search, ask V0 to generate filter controls for date range, category, and price (free vs paid). These can be implemented as client-side filters on the fetched events array, or as parameters passed to your API route for server-side filtering. Pay special attention to the ticket availability display. Eventbrite events have multiple ticket classes with different prices — a free registration tier plus a VIP tier, for example. Your V0 components should handle displaying a price range ('Free – $150') or a single price ('$50'), and the 'X tickets remaining' display should handle the edge cases: no capacity limit (don't show remaining count), low capacity (show urgency), and sold out (disable button).

Create a Next.js API route at `app/api/eventbrite/route.ts` that queries the Eventbrite v3 REST API. The base URL is `https://www.eventbriteapi.com/v3/` and authentication uses a Bearer token in the Authorization header. The main endpoints you need: - `GET /organizers/{organizer_id}/events/` — all events for your organizer, sorted by date - `GET /events/{event_id}/` — single event details - `GET /events/{event_id}/ticket_classes/` — ticket types and availability - `GET /events/{event_id}/attendees/` — attendee list (requires organizer access) - `GET /events/search/` — public event search by location/keyword For the events listing page, the organizer events endpoint is most useful. Add query parameters to control what's returned: `status=live` for only published events, `order_by=start_asc` for chronological order, `expand=ticket_availability,venue` to include venue and availability data in one request rather than separate calls. Ticket availability comes back in the `ticket_availability` expansion with fields: `minimum_ticket_price`, `maximum_ticket_price`, `is_sold_out`, `has_available_tickets`, `spots_remaining`. The `url` field on each event contains the direct Eventbrite checkout link to use for your 'Get Tickets' button. Eventbrite's API paginates results with a `pagination` object containing `has_more_items` and `continuation` token. Implement cursor-based pagination rather than page numbers for reliable results.

1// app/api/eventbrite/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const EVENTBRITE_TOKEN = process.env.EVENTBRITE_PRIVATE_TOKEN!;
5const EVENTBRITE_BASE = 'https://www.eventbriteapi.com/v3';
6
7async function eventbriteFetch(path: string, params?: Record<string, string>) {
8  const url = new URL(`${EVENTBRITE_BASE}${path}`);
9  if (params) Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
10
11  const res = await fetch(url.toString(), {
12    headers: { Authorization: `Bearer ${EVENTBRITE_TOKEN}` },
13    next: { revalidate: 300 }, // cache 5 minutes
14  });
15
16  if (!res.ok) throw new Error(`Eventbrite API error: ${res.status}`);
17  return res.json();
18}
19
20export async function GET(request: NextRequest) {
21  const { searchParams } = new URL(request.url);
22  const resource = searchParams.get('resource');
23  const organizerId = process.env.EVENTBRITE_ORGANIZER_ID!;
24  const eventId = searchParams.get('eventId') || '';
25  const continuation = searchParams.get('continuation') || '';
26
27  try {
28    switch (resource) {
29      case 'events': {
30        const params: Record<string, string> = {
31          status: 'live',
32          order_by: 'start_asc',
33          expand: 'ticket_availability,venue',
34          page_size: '12',
35        };
36        if (continuation) params.continuation = continuation;
37        const data = await eventbriteFetch(`/organizers/${organizerId}/events/`, params);
38        return NextResponse.json({
39          events: data.events.map((e: any) => ({
40            id: e.id,
41            name: e.name.text,
42            description: e.description?.text?.slice(0, 200),
43            start: e.start.local,
44            end: e.end.local,
45            url: e.url,
46            logo: e.logo?.url || null,
47            venue: e.venue ? { name: e.venue.name, city: e.venue.address?.city } : null,
48            isFree: e.is_free,
49            isSoldOut: e.ticket_availability?.is_sold_out,
50            spotsRemaining: e.ticket_availability?.spots_remaining,
51            minPrice: e.ticket_availability?.minimum_ticket_price?.major_value,
52            maxPrice: e.ticket_availability?.maximum_ticket_price?.major_value,
53          })),
54          hasMore: data.pagination?.has_more_items,
55          continuation: data.pagination?.continuation,
56        });
57      }
58      case 'event': {
59        if (!eventId) return NextResponse.json({ error: 'eventId required' }, { status: 400 });
60        const data = await eventbriteFetch(`/events/${eventId}/`, {
61          expand: 'ticket_classes,venue,organizer',
62        });
63        return NextResponse.json(data);
64      }
65      case 'attendees': {
66        if (!eventId) return NextResponse.json({ error: 'eventId required' }, { status: 400 });
67        const data = await eventbriteFetch(`/events/${eventId}/attendees/`);
68        return NextResponse.json(data);
69      }
70      default:
71        return NextResponse.json({ error: 'resource must be: events, event, or attendees' }, { status: 400 });
72    }
73  } catch (err: any) {
74    return NextResponse.json({ error: err.message }, { status: 500 });
75  }
76}

Navigate to your Vercel project → Settings → Environment Variables and add the required variables. Add `EVENTBRITE_PRIVATE_TOKEN` — get this from Eventbrite's API Keys page at www.eventbrite.com/platform/api-keys. Click 'Create API Key', give it a name like 'My V0 App', and copy the private token. This token authenticates all API requests and should never be exposed in client-side code. Add `EVENTBRITE_ORGANIZER_ID` — this is your organizer's numeric ID. Find it in Eventbrite by going to your organizer profile page; the ID appears in the URL (e.g., eventbrite.com/o/my-organization-12345678 → the ID is 12345678). You can also find it by calling `/users/me/` API endpoint which returns your organizer IDs. Both variables should be set without the `NEXT_PUBLIC_` prefix as they are server-only credentials. The organizer ID is not sensitive but keeping it server-side is good practice to avoid exposing your account structure. If you manage multiple Eventbrite accounts or want to display events from different organizers, store the organizer ID(s) in an environment variable or configuration file rather than hardcoding them. After saving the variables, redeploy your application by pushing a new commit or redeploying from the Vercel Dashboard.

Connect the V0-generated event cards to your API route and wire up the ticket purchase flow. The Eventbrite ticket purchase flow is handled entirely by Eventbrite — your app redirects users to the `url` field from each event, which takes them to Eventbrite's hosted checkout where they select tickets and pay. Update the V0-generated event components to fetch from `/api/eventbrite?resource=events` on mount. Map the normalized event objects to your card component props. The `start` field is an ISO timestamp — format it using JavaScript's `Intl.DateTimeFormat` for localized display. For the 'Get Tickets' button, use a simple anchor tag with `href={event.url}` and `target='_blank'`. Disable the button when `event.isSoldOut` is true and change the button text to 'Sold Out'. Show the remaining spots count (`event.spotsRemaining`) only when it's below a threshold like 20 — showing '500 tickets remaining' adds no urgency, but '8 tickets remaining' creates a meaningful call to action. For the price display: if `event.isFree`, show 'Free' in a green badge. Otherwise, display the price range — if `minPrice === maxPrice`, show a single price. If they differ, show '$X – $Y'. For Eventbrite's embedded checkout widget (an alternative to redirecting), Eventbrite provides an EBWidgets.js embed that opens a modal checkout on your page. This keeps users on your domain but requires loading an external JavaScript file. The simpler redirect approach is recommended unless your conversion rates require the frictionless on-page experience.

1// Utility: format Eventbrite price and availability
2export function formatEventPrice(event: {
3  isFree: boolean;
4  minPrice?: string;
5  maxPrice?: string;
6}): string {
7  if (event.isFree) return 'Free';
8  if (!event.minPrice) return 'See prices';
9  if (event.minPrice === event.maxPrice) return `$${event.minPrice}`;
10  return `$${event.minPrice} – $${event.maxPrice}`;
11}
12
13export function formatEventDate(isoDate: string): string {
14  const date = new Date(isoDate);
15  return new Intl.DateTimeFormat('en-US', {
16    weekday: 'short',
17    month: 'short',
18    day: 'numeric',
19    hour: 'numeric',
20    minute: '2-digit',
21    hour12: true,
22  }).format(date);
23}
24// Usage: formatEventDate('2026-04-15T19:00:00') → 'Tue, Apr 15, 7:00 PM'