Ticketing Element Reference
Properties, events, and theming for the Session Services Ticketing element.
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
tenantId | string | Yes | — | Tenant ID used to scope API requests |
eventId | string | Yes | — | Event ID to load ticketing information |
apiUrl | string | No | https://api.session.services | Base API URL |
locale | string | No | en-US | Locale for date/time/currency |
returnUrl | string | No | — | URL to redirect after checkout |
theme | 'light' | 'dark' | 'system' | No | system | Visual theme; system follows OS |
Use kebab-case in HTML (
tenant-id) and camelCase in React (tenantId).
Events
| Event | Detail | Description |
|---|---|---|
cartUpdate | OrderQuote | Fires when the cart changes |
checkoutInit | { orderId: string; checkoutUrl: string } | Fires when checkout begins |
errorOccurred | { error: string } | Fires if a recoverable error occurs |
Example (Web):
<sessions-ticketing tenant-id="t_123" event-id="evt_123"></sessions-ticketing>Theming
Customize styles with CSS variables (design tokens).
Works in both Web Components and React (pass CSS variables via the style prop in React).
Minimal Example
sessions-ticketing {
--card: #ffffff;
--card-foreground: #111827;
--primary: #ec4899;
--primary-foreground: #ffffff;
--muted-foreground: #6b7280;
}Complete Variable List
Core surfaces and text
--background: Host background (defaults transparent)--foreground: Primary text--card: Card/section background--card-foreground: Text on card--popover: Overlay background (reserved)--popover-foreground: Overlay text (reserved)
Actions and accents
--primary,--primary-foreground--secondary,--secondary-foreground--accent,--accent-foreground
Muted and feedback
--muted,--muted-foreground--destructive--border,--input,--ring
Layout and shape
--radius--spacing-xs … --spacing-xl
Typography
--font-family--font-size-xs … --font-size-2xl--font-weight-normal … --font-weight-bold
Shadows and motion
--shadow-sm … --shadow-xl--transition-fast … --transition-slow