@session-services/react-elements

React components for Session Services ticketing.

Installation

npm install @session-services/react-elements @session-services/web-elements @session-services/sdk

Usage

import { SessionsTicketing } from '@session-services/react-elements';

export default function TicketPage() {
  return (
    <SessionsTicketing
      tenantId="your-tenant-id"
      eventId="evt_123"
      returnUrl="https://yoursite.com/order/complete"
      theme="light"
    />
  );
}

Props

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

Events

Events are exposed as React props with on* prefix:

<SessionsTicketing
  tenantId="..."
  eventId="..."
  onCartUpdate={(e) => {
    console.log('Cart:', e.detail); // OrderQuote
  }}
  onCheckoutInit={(e) => {
    const { checkoutUrl } = e.detail;
    window.location.href = checkoutUrl;
  }}
  onErrorOccurred={(e) => {
    console.error('Error:', e.detail.error);
  }}
/>

| Event | Detail Type | Description | |-------|-------------|-------------| | onCartUpdate | OrderQuote | Fired when cart contents change | | onCheckoutInit | { orderId: string; checkoutUrl: string } | Fired when checkout begins | | onErrorOccurred | { error: string } | Fired on errors |

Theming

Pass CSS variables via the style prop:

<SessionsTicketing
  tenantId="..."
  eventId="..."
  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',
  } as React.CSSProperties}
/>

SSR

The component renders a custom element that works with React SSR frameworks like Next.js. No special configuration required.

License

MIT