@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 { Ticketing } from '@session-services/react-elements';

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

You can also import individual wrappers:

import { FormattedText } from '@session-services/react-elements/formatted-text';
import { Ticketing } from '@session-services/react-elements/ticketing';

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 | | couponCode | string | No | — | Coupon code to prefill and apply | | initialAdmissionPrices | object \| string | No | — | Precomputed coupon preview prices keyed by admissionId::sectionId | | initialPreviewQuote | object \| string | No | — | Precomputed preview quote for the initial coupon code | | passcode | string | No | — | Passcode for protected events or hidden tickets | | stickyCheckout | boolean | No | false | Enables the mobile sticky checkout/select-ticket CTA | | 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:

<Ticketing
  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);
  }}
  onAnalyticsEventSkipped={(e) => {
    console.warn('Analytics skipped:', e.detail);
  }}
/>

| 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 | | onAnalyticsEventSkipped | { eventType: string; eventId: string; reason: string } | Fired when analytics is enabled but an event cannot be tracked |

Theming

Pass CSS variables via the style prop:

<Ticketing
  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 and hydration

The wrappers work with React SSR frameworks like Next.js without additional registration configuration. They render no custom-element markup on the server or during the initial hydration pass. After hydration completes, the wrappers load and register the web components on the client, then render them.

Deferring registration prevents the web components from upgrading and changing the server-rendered DOM before React finishes hydrating it.

License

MIT