How to Integrate Bolt.new with Eventbrite

1# .env
2# Eventbrite private token — server-side only
3# Get from: eventbrite.com/platform/api → Your Apps → API Keys → Private Token
4EVENTBRITE_TOKEN=your_private_token_here
5
6# Eventbrite Organization/User ID — safe for client-side use
7# Find by calling: https://www.eventbriteapi.com/v3/users/me/?token=YOUR_TOKEN
8# Look for the 'id' field in the response
9NEXT_PUBLIC_EVENTBRITE_ORG_ID=123456789
10
11# Test your token works:
12# curl https://www.eventbriteapi.com/v3/users/me/ -H 'Authorization: Bearer YOUR_TOKEN'

1// lib/eventbrite.ts
2const EVENTBRITE_BASE = 'https://www.eventbriteapi.com/v3';
3
4async function eventbriteFetch<T>(endpoint: string, params?: Record<string, string>): Promise<T> {
5  const token = process.env.EVENTBRITE_TOKEN;
6  if (!token) throw new Error('EVENTBRITE_TOKEN not configured');
7
8  const url = new URL(`${EVENTBRITE_BASE}${endpoint}`);
9  if (params) {
10    Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
11  }
12
13  const res = await fetch(url.toString(), {
14    headers: { Authorization: `Bearer ${token}` },
15  });
16
17  if (!res.ok) {
18    const err = await res.json().catch(() => ({}));
19    throw new Error(`Eventbrite API error ${res.status}: ${JSON.stringify(err)}`);
20  }
21  return res.json();
22}
23
24interface RawEvent {
25  id: string;
26  name: { text: string };
27  description: { text: string };
28  start: { local: string };
29  end: { local: string };
30  url: string;
31  online_event: boolean;
32  logo?: { original?: { url: string } };
33  venue?: { name: string; address?: { localized_address_display: string } };
34  ticket_classes?: Array<{ cost?: { display: string; value: number }; free: boolean }>;
35}
36
37interface EventListResponse { events: RawEvent[]; pagination: { has_more_items: boolean; continuation: string } }
38
39export async function listEvents(orgId: string) {
40  const data = await eventbriteFetch<EventListResponse>(`/organizations/${orgId}/events/`, {
41    status: 'live',
42    time_filter: 'current_future',
43    expand: 'venue,ticket_classes,logo',
44    page_size: '20',
45  });
46
47  return data.events.map((e) => {
48    const prices = (e.ticket_classes ?? []).filter((t) => !t.free).map((t) => t.cost?.value ?? 0);
49    return {
50      id: e.id,
51      name: e.name.text,
52      description: e.description.text ?? '',
53      startTime: e.start.local,
54      endTime: e.end.local,
55      venueName: e.venue?.name ?? (e.online_event ? 'Online' : ''),
56      venueAddress: e.venue?.address?.localized_address_display ?? '',
57      isOnline: e.online_event,
58      imageUrl: e.logo?.original?.url ?? '',
59      isFree: (e.ticket_classes ?? []).every((t) => t.free),
60      minPrice: prices.length ? Math.min(...prices) / 100 : 0,
61      maxPrice: prices.length ? Math.max(...prices) / 100 : 0,
62      eventbriteUrl: e.url,
63    };
64  });
65}

1// components/EventCard.tsx
2'use client';
3import { useEffect } from 'react';
4
5interface Event {
6  id: string;
7  name: string;
8  startTime: string;
9  venueName: string;
10  imageUrl: string;
11  isFree: boolean;
12  minPrice: number;
13  maxPrice: number;
14  eventbriteUrl: string;
15}
16
17declare global {
18  interface Window {
19    EBWidgets?: {
20      createWidget: (options: {
21        widgetType: string;
22        eventId: string;
23        modal: boolean;
24        modalTriggerElementId: string;
25        onOrderComplete: () => void;
26      }) => void;
27    };
28  }
29}
30
31export function EventCard({ event }: { event: Event }) {
32  const buttonId = `eb-btn-${event.id}`;
33
34  useEffect(() => {
35    // Load Eventbrite widget script if not already loaded
36    if (!document.getElementById('eb-widget-script')) {
37      const script = document.createElement('script');
38      script.id = 'eb-widget-script';
39      script.src = 'https://www.eventbrite.com/static/widgets/eb_widgets.js';
40      script.async = true;
41      script.onload = () => initWidget();
42      document.head.appendChild(script);
43    } else if (window.EBWidgets) {
44      initWidget();
45    }
46
47    function initWidget() {
48      window.EBWidgets?.createWidget({
49        widgetType: 'checkout',
50        eventId: event.id,
51        modal: true,
52        modalTriggerElementId: buttonId,
53        onOrderComplete: () => {
54          console.log(`Order complete for event ${event.id}`);
55        },
56      });
57    }
58  }, [event.id, buttonId]);
59
60  const priceLabel = event.isFree ? 'Free' :
61    event.minPrice === event.maxPrice ? `$${event.minPrice}` :
62    `$${event.minPrice}–$${event.maxPrice}`;
63
64  return (
65    <div className="rounded-xl overflow-hidden border shadow-sm hover:shadow-md transition-shadow">
66      {event.imageUrl ? (
67        <img src={event.imageUrl} alt={event.name} className="h-48 w-full object-cover" />
68      ) : (
69        <div className="h-48 w-full bg-gradient-to-br from-purple-500 to-pink-500" />
70      )}
71      <div className="p-5">
72        <h3 className="font-bold text-lg line-clamp-2">{event.name}</h3>
73        <p className="mt-1 text-sm text-gray-500">{new Date(event.startTime).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</p>
74        <p className="text-sm text-gray-500">{event.venueName}</p>
75        <div className="mt-4 flex items-center justify-between">
76          <span className="font-medium text-purple-600">{priceLabel}</span>
77          <button id={buttonId} className="rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700">
78            Get Tickets
79          </button>
80        </div>
81      </div>
82    </div>
83  );
84}

1// app/api/webhooks/eventbrite/route.ts
2// NOTE: Webhooks require a public URL — deploy first, then register in Eventbrite developer portal
3import { NextResponse } from 'next/server';
4
5export async function POST(request: Request) {
6  const body = await request.json();
7
8  const { action, api_url: apiUrl, config } = body;
9
10  // Basic verification — check the user ID matches your account
11  const expectedUserId = process.env.EVENTBRITE_USER_ID;
12  if (expectedUserId && config?.user_id && config.user_id !== expectedUserId) {
13    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
14  }
15
16  if (action === 'order.placed' && apiUrl) {
17    try {
18      // Fetch the full order details from Eventbrite
19      const orderRes = await fetch(apiUrl, {
20        headers: { Authorization: `Bearer ${process.env.EVENTBRITE_TOKEN}` },
21      });
22      const order = await orderRes.json();
23
24      const attendee = order.attendees?.[0];
25      console.log(`New order ${order.id}: ${attendee?.profile?.name} (${attendee?.profile?.email})`);
26
27      // TODO: Add to database, send custom confirmation email, etc.
28    } catch (err) {
29      console.error('Failed to process order webhook:', err);
30    }
31  } else if (action === 'order.refunded') {
32    console.log(`Order refunded: ${apiUrl}`);
33    // TODO: Update database, revoke access
34  } else if (action === 'attendee.updated') {
35    console.log(`Attendee updated: ${apiUrl}`);
36    // TODO: Sync updated attendee info
37  }
38
39  // Always return 200 immediately so Eventbrite does not retry
40  return NextResponse.json({ received: true });
41}