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 |
enableAnalytics | boolean | No | true | Toggle analytics event tracking |
debugAnalytics | boolean | No | false | Log analytics events to the console |
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 |
Listening for events (Web):
<session-services-ticketing
tenant-id="tnt_01jqpj2t2kfvmstt6f6tzkbaf2"
event-id="evt_01jps5cgsenjrazw6wswmyspa3"
></session-services-ticketing>
<script>
const el = document.querySelector('session-services-ticketing');
el.addEventListener('cartUpdate', (e) => {
console.log('Cart total:', e.detail.total);
});
el.addEventListener('checkoutInit', (e) => {
console.log('Order:', e.detail.orderId);
// The element redirects automatically — use this
// event for analytics or pre-redirect logic.
});
el.addEventListener('errorOccurred', (e) => {
console.error('Ticketing error:', e.detail.error);
});
</script>
Listening for events (React):
<SessionServicesTicketing
tenantId="tnt_01jqpj2t2kfvmstt6f6tzkbaf2"
eventId="evt_01jps5cgsenjrazw6wswmyspa3"
onCartUpdate={(e) => console.log('Cart:', e.detail)}
onCheckoutInit={(e) => console.log('Checkout:', e.detail)}
onErrorOccurred={(e) => console.error(e.detail.error)}
/>
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
session-services-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
Feedback and state
--muted,--muted-foreground--destructive,--destructive-foreground--success--warning--info,--info-foreground--border,--input,--ring--backdrop: Modal overlay colour
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