Quickstart
Display events and sell tickets on your website using the Session Services API and Ticketing Element.
This guide shows you how to display events on your website and sell tickets using our pre-built Web Element.
This approach gives you full control over the look and feel of your event listings while we handle the complexity of the checkout flow.
End-to-End Flow
List Events
Your application calls the /events endpoint. The API provides the event data that your UI uses to render listings. Every request must include your unique x-tenant-id in the headers.
GET /events HTTP/1.1
Host: api.session.services
x-tenant-id: your-tenant-idawait fetch('https://api.session.services/events', {
headers: { 'x-tenant-id': 'your-tenant-id' },
});View Details
The user selects an event. Your application shows a detail page using data from /events/{identifier} (identifier can be an ID or slug).
Use a single endpoint to fetch an event by either its unique ID or its URL-friendly slug.
GET /events/{identifier} HTTP/1.1
Host: api.session.services
x-tenant-id: your-tenant-idconst identifier = 'evt_123'; // or 'summer-festival'
const url = new URL(`https://api.session.services/events/${identifier}`);
await fetch(url, {
headers: { 'x-tenant-id': 'your-tenant-id' },
});Select Tickets
The <sessions-ticketing /> element on your page handles ticket selection. This Web Element drives ticket selling and the checkout experience.
On your event detail page, embed the web component and set event-id to match the event being displayed.
<script type="module">
import { defineCustomElements } from "https://unpkg.com/@session-services/web-elements/loader/index.js";
defineCustomElements();
</script>
<sessions-ticketing
tenant-id="your-tenant-id"
event-id="evt_123"
return-url="https://yoursite.com/order/complete"
theme="light">
</sessions-ticketing><script type="module">
import { defineCustomElements } from "@session-services/web-elements/loader";
defineCustomElements();
</script>
<sessions-ticketing
tenant-id="your-tenant-id"
event-id="evt_123"
return-url="https://yoursite.com/order/complete"
theme="light">
</sessions-ticketing>import { SessionsTicketing, defineCustomElements } from "@session-services/react-elements";
export default function Page() {
return (
<SessionsTicketing
tenantId="your-tenant-id"
eventId="evt_123"
returnUrl="https://yoursite.com/order/complete"
theme="light"
/>
);
}Redirect to Checkout
The element redirects the user to a secure, hosted checkout page.
Complete Purchase
After purchase, the user returns to your specified return-url.
Example Next.js Repo
This example repo demonstrates everything above end-to-end:
jmcmullen/session-services-example
0