Package Exports

@session-services/web-elements
@session-services/web-elements/components
@session-services/web-elements/components/index
@session-services/web-elements/components/index.js
@session-services/web-elements/components/session-services-formatted-text
@session-services/web-elements/components/session-services-formatted-text.js
@session-services/web-elements/components/session-services-ticketing
@session-services/web-elements/components/session-services-ticketing.js
@session-services/web-elements/dist/cjs/app-globals-V2Kpy_OQ.js
@session-services/web-elements/dist/cjs/index-C6e98Atu.js
@session-services/web-elements/dist/cjs/index.cjs.js
@session-services/web-elements/dist/cjs/loader.cjs.js
@session-services/web-elements/dist/cjs/session-services-elements.cjs.js
@session-services/web-elements/dist/cjs/session-services-formatted-text.cjs.entry.js
@session-services/web-elements/dist/cjs/session-services-ticketing.cjs.entry.js
@session-services/web-elements/dist/collection/collection-manifest.json
@session-services/web-elements/dist/collection/components/session-services-formatted-text/session-services-formatted-text.css
@session-services/web-elements/dist/collection/components/session-services-formatted-text/session-services-formatted-text.js
@session-services/web-elements/dist/collection/components/session-services-ticketing/session-services-ticketing.css
@session-services/web-elements/dist/collection/components/session-services-ticketing/session-services-ticketing.js
@session-services/web-elements/dist/collection/index.js
@session-services/web-elements/dist/components/index.d.ts
@session-services/web-elements/dist/components/index.js
@session-services/web-elements/dist/components/session-services-formatted-text.d.ts
@session-services/web-elements/dist/components/session-services-formatted-text.js
@session-services/web-elements/dist/components/session-services-ticketing.d.ts
@session-services/web-elements/dist/components/session-services-ticketing.js
@session-services/web-elements/dist/esm/app-globals-DQuL1Twl.js
@session-services/web-elements/dist/esm/index-CeXOR4aK.js
@session-services/web-elements/dist/esm/index.js
@session-services/web-elements/dist/esm/loader.js
@session-services/web-elements/dist/esm/session-services-elements.js
@session-services/web-elements/dist/esm/session-services-formatted-text.entry.js
@session-services/web-elements/dist/esm/session-services-ticketing.entry.js
@session-services/web-elements/dist/index.cjs.js
@session-services/web-elements/dist/index.js
@session-services/web-elements/dist/session-services-elements/index.esm.js
@session-services/web-elements/dist/session-services-elements/p-3bb6ceef.entry.js
@session-services/web-elements/dist/session-services-elements/p-CeXOR4aK.js
@session-services/web-elements/dist/session-services-elements/p-DQuL1Twl.js
@session-services/web-elements/dist/session-services-elements/p-a2404c46.entry.js
@session-services/web-elements/dist/session-services-elements/session-services-elements.esm.js
@session-services/web-elements/dist/sst-env.d.ts
@session-services/web-elements/dist/types/components.d.ts
@session-services/web-elements/dist/types/components/session-services-formatted-text/session-services-formatted-text.d.ts
@session-services/web-elements/dist/types/components/session-services-ticketing/session-services-ticketing.d.ts
@session-services/web-elements/dist/types/index.d.ts
@session-services/web-elements/dist/types/stencil-public-runtime.d.ts
@session-services/web-elements/loader
@session-services/web-elements/types

Readme

@session-services/web-elements

Framework-agnostic Web Components for Session Services ticketing.

Installation

npm install @session-services/web-elements

The SDK is bundled, so no additional dependencies are required.

CDN Usage

Use directly in browsers via unpkg (no build step required):

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

<session-services-ticketing
  tenant-id="your-tenant-id"
  event-id="evt_123"
  return-url="https://yoursite.com/order/complete"
></session-services-ticketing>

Custom elements are auto-registered when the script loads.

Usage

import { defineCustomElements } from '@session-services/web-elements/loader';

// Call once at app startup
defineCustomElements();

<session-services-ticketing
  tenant-id="your-tenant-id"
  event-id="evt_123"
  return-url="https://yoursite.com/order/complete"
  theme="light"
></session-services-ticketing>

Props

Prop	Type	Required	Default	Description
`tenant-id`	`string`	Yes	—	Your Session Services tenant ID
`event-id`	`string`	Yes	—	Event ID to display tickets for
`api-url`	`string`	No	`https://api.session.services`	API endpoint URL
`locale`	`string`	No	`en-US`	Locale for formatting
`return-url`	`string`	No	—	URL to redirect after checkout
`theme`	`'light' \| 'dark' \| 'system'`	No	`system`	Color theme
`enable-analytics`	`boolean`	No	`true`	Enable analytics tracking
`debug-analytics`	`boolean`	No	`false`	Log analytics events to console

Events

Listen to events using standard DOM event listeners:

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

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

element.addEventListener('checkoutInit', (e) => {
  const { orderId, checkoutUrl } = e.detail;
  window.location.href = checkoutUrl;
});

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

Event	Detail Type	Description
`cartUpdate`	`OrderQuote`	Fired when cart contents change
`checkoutInit`	`{ orderId: string; checkoutUrl: string }`	Fired when checkout begins
`errorOccurred`	`{ error: string }`	Fired on errors

Theming

Customize appearance with CSS variables:

<session-services-ticketing
  tenant-id="..."
  event-id="..."
  style="
    --card: #fff;
    --card-foreground: #111827;
    --border: #e5e7eb;
    --primary: #ec4899;
    --primary-foreground: #ffffff;
    --accent: #f472b6;
    --accent-foreground: #0f172a;
    --secondary: #f3f4f6;
    --secondary-foreground: #1f2937;
    --muted-foreground: #6b7280;
    --ring: #f472b6;
  "
></session-services-ticketing>

Framework Integration

Works with any framework - React, Vue, Angular, Svelte, or vanilla HTML.

For React, consider using @session-services/react-elements for better DX with typed props and event handlers.

License

MIT