Racquet Clubs Ticketing Integration

Embed event ticketing on your website using the Session Services API and web component.

---

Ticketing Widget

Add the ticket purchasing widget to any page.

1. Load the Component (once per page)

<script type="module" src="https://unpkg.com/@session-services/web-elements"></script>

Custom elements are auto-registered when the script loads.

2. Embed the Widget

<session-services-ticketing
  tenant-id="tnt_01jqpj2t2kfvmstt6f6tzkbaf2"
  event-id="EVENT_ID_HERE"
  return-url="https://yoursite.com/thank-you"
  theme="light"
></session-services-ticketing>

Props

Prop	Required	Description
tenant-id	Yes	tnt_01jqpj2t2kfvmstt6f6tzkbaf2
event-id	Yes	Event ID or slug
return-url	No	Redirect URL after checkout
theme	No	light, dark, or system

Custom Styling

<session-services-ticketing
  tenant-id="tnt_01jqpj2t2kfvmstt6f6tzkbaf2"
  event-id="EVENT_ID_HERE"
  style="
    --primary: #ec4899;
    --primary-foreground: #ffffff;
    --card: #ffffff;
    --card-foreground: #111827;
    --border: #e5e7eb;
  "
></session-services-ticketing>

---

REST API

Fetch events and venues using the API.

Headers (required for all requests)

const headers = {
  'x-tenant-id': 'tnt_01jqpj2t2kfvmstt6f6tzkbaf2',
  'x-api-version': '2025-09-22'
};

---

Get All Events

const params = new URLSearchParams({
  promoterId: 'pmt_01kcqj2g52e0796vvj59emcyc1'
});

const res = await fetch(`https://api.session.services/events?${params}`, { headers });
const { events } = await res.json();

---

Get Events by Venue

const params = new URLSearchParams({
  promoterId: 'pmt_01kcqj2g52e0796vvj59emcyc1',
  venueId: 'VENUE_ID_HERE'
});

const res = await fetch(`https://api.session.services/events?${params}`, { headers });
const { events } = await res.json();

---

Get Single Event

// By slug
const res = await fetch(
  'https://api.session.services/events/summer-festival-2025',
  { headers }
);
const { event } = await res.json();

// By ID
const res = await fetch(
  'https://api.session.services/events/evt_01jps5cgsenjrazw6wswmyspa3',
  { headers }
);
const { event } = await res.json();

Response includes: name, description, dates, location, images, ticket sections.

---

Get All Venues

const params = new URLSearchParams({
  teamId: 'tem_01kcqj2g52e0796vttfjpy7x9v'
});

const res = await fetch(`https://api.session.services/venues?${params}`, { headers });
const { venues } = await res.json();

---

Example: Event Page

Fetch event details and display the ticketing widget:

<script type="module" src="https://unpkg.com/@session-services/web-elements"></script>

<div id="event-content">
  <h1 id="event-title"></h1>
  <p id="event-date"></p>
  <p id="event-location"></p>
  <p id="event-description"></p>

  <session-services-ticketing
    tenant-id="tnt_01jqpj2t2kfvmstt6f6tzkbaf2"
    return-url="https://yoursite.com/thank-you"
    theme="light"
  ></session-services-ticketing>
</div>

<script type="module">
  const headers = {
    'x-tenant-id': 'tnt_01jqpj2t2kfvmstt6f6tzkbaf2',
    'x-api-version': '2025-09-22'
  };

  // Get event slug from URL (e.g., /events/summer-festival)
  const slug = window.location.pathname.split('/').pop();

  const res = await fetch(`https://api.session.services/events/${slug}`, { headers });
  const { event } = await res.json();

  document.getElementById('event-title').textContent = event.name;
  document.getElementById('event-description').textContent = event.description;
  document.getElementById('event-location').textContent = event.location?.name;
  document.getElementById('event-date').textContent = new Date(event.entryStartsAt).toLocaleDateString('en-AU', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit'
  });

  // Set the event ID on the widget
  document.querySelector('session-services-ticketing').setAttribute('event-id', event.id);
</script>

---

Example: Events List

Display all events:

<div id="events-list"></div>

<script type="module">
  const headers = {
    'x-tenant-id': 'tnt_01jqpj2t2kfvmstt6f6tzkbaf2',
    'x-api-version': '2025-09-22'
  };

  const params = new URLSearchParams({
    promoterId: 'pmt_01kcqj2g52e0796vvj59emcyc1'
  });

  const res = await fetch(`https://api.session.services/events?${params}`, { headers });
  const { events } = await res.json();

  const container = document.getElementById('events-list');

  events.forEach(event => {
    container.innerHTML += `
      <a href="/events/${event.slug}">
        <img src="${event.images?.desktop?.src || ''}" alt="${event.name}" />
        <h3>${event.name}</h3>
        <p>${new Date(event.entryStartsAt).toLocaleDateString('en-AU')}</p>
        <p>${event.location?.name || ''}</p>
      </a>
    `;
  });
</script>

---

Example: Events by Venue

Display events for a specific venue:

<h1 id="venue-name"></h1>
<div id="events-list"></div>

<script type="module">
  const headers = {
    'x-tenant-id': 'tnt_01jqpj2t2kfvmstt6f6tzkbaf2',
    'x-api-version': '2025-09-22'
  };

  // Get venue slug from URL (e.g., /venues/melbourne-tennis-centre)
  const slug = window.location.pathname.split('/').pop();

  // Get venues and find by slug
  const venueParams = new URLSearchParams({
    teamId: 'tem_01kcqj2g52e0796vttfjpy7x9v'
  });

  const venuesRes = await fetch(`https://api.session.services/venues?${venueParams}`, { headers });
  const { venues } = await venuesRes.json();
  const venue = venues.find(v => v.slug === slug);

  if (!venue) {
    document.body.innerHTML = '<h1>Venue not found</h1>';
    throw new Error('Venue not found');
  }

  document.getElementById('venue-name').textContent = venue.name;

  // Get events for this venue
  const eventParams = new URLSearchParams({
    promoterId: 'pmt_01kcqj2g52e0796vvj59emcyc1',
    venueId: venue.id
  });

  const eventsRes = await fetch(`https://api.session.services/events?${eventParams}`, { headers });
  const { events } = await eventsRes.json();

  const container = document.getElementById('events-list');

  events.forEach(event => {
    container.innerHTML += `
      <a href="/events/${event.slug}">
        <h3>${event.name}</h3>
        <p>${new Date(event.entryStartsAt).toLocaleDateString('en-AU')}</p>
      </a>
    `;
  });
</script>

---

Widget Events

Listen for cart and checkout events:

const widget = document.querySelector('session-services-ticketing');

widget.addEventListener('cartUpdate', (e) => {
  console.log('Cart updated:', e.detail);
});

widget.addEventListener('checkoutInit', (e) => {
  console.log('Checkout started:', e.detail.orderId);
});

widget.addEventListener('errorOccurred', (e) => {
  console.error('Error:', e.detail.error);
});

---

Reference

Key	Value
API URL	https://api.session.services
Tenant ID	tnt_01jqpj2t2kfvmstt6f6tzkbaf2
Team ID	tem_01kcqj2g52e0796vttfjpy7x9v
Promoter ID	pmt_01kcqj2g52e0796vvj59emcyc1
API Version	2025-09-22