Ticketlayer Documentation

website·Indexed 31 days ago

https://docs.ticketlayer.com

A ticketing platform that allows developers to sell tickets on any website using a drop-in script tag or npm packages. Features include the Live SDK, Ticketlayer Elements for custom HTML tags, a Backstage API for server-side management, webhooks for order notifications, and a remote MCP server for AI agent integration.

Tokens
19.2K
Snippets
103
Records
133
Agent score
47%

What's inside Ticketlayer

  1. Overview of Ticketlayer Ticketing Platform

    Ticketlayer is a ticketing platform that allows developers to sell tickets on any website. It provides a Live SDK and Elements for frontend integration, a Backstage API for managing events, orders, and customers, and a webhook system for order and ticket updates. The API uses a dated versioning system (e.g., 2026-06-13) sent via the TL-Version header; additive changes do not increment this version.
  2. Overview of Ticketlayer Webhook Event Types

    Ticketlayer sends signed JSON envelopes to registered URLs when specific events occur within an organization. You can retrieve the full list of event types and descriptions via GET /v1/webhook-event-types.

    Event TypeTrigger ConditionPayload Type
    order.createdA new order was startedOrder
    order.confirmedAn order was paid and confirmedOrder
    order.cancelledAn order was cancelledOrder
    order.refundedAn order was refundedOrder
    customer.createdA new customer was createdCustomer
    event.createdA new event was createdEvent
    ticket.issuedTickets (passes) were issued for an orderTickets issued
    ticket.redeemedA ticket was scanned and redeemedTicket redeemed
  3. Connect an AI agent to Ticketlayer via MCP

    Ticketlayer provides a remote MCP (Model Context Protocol) server that allows AI agents to read catalogues, orders, customers, and analytics, and (with permission) create or update events. The agent operates using the user's own credentials and RBAC permissions.

    Server Details:

    • Endpoint: https://mcp.staging.t9r.dev/mcp (Staging)
    • Transport: Streamable HTTP
    • Auth: OAuth 2.1 (Dynamic Client Registration + PKCE)
    • Connect Scope: mcp

    Important Connectivity Note: The authorization server (Stagedoor) is currently only accessible from the Ticketlayer team tailnet. Users outside this network will be unable to complete the browser-based login/consent flow.

  4. Understand the Ticketlayer checkout lifecycle

    The purchase process follows these steps:

    1. Browsing: The Live SDK uses the publishable key to show events.
    2. Selection: When a user adds tickets, the SDK creates a Live session and a timed reservation (cart).
    3. Payment: Checkout opens in a hosted iframe modal. Payment is processed on Ticketlayer's origin, so card details never touch the merchant's page.
    4. Completion: Upon success, the SDK emits a checkout:completed event. The merchant can then display <tl-order-confirmation> (via ?orderId= in URL) or <tl-order-tickets>.
    5. Notification: The merchant server is notified via webhooks (order.confirmed, ticket.issued).
  5. Understand Ticketlayer Backstage API versioning

    The Backstage API uses dated versions (e.g., 2026-06-13). Within a specific version, changes are strictly additive (new endpoints, optional parameters, or response fields); existing behavior remains unchanged. Breaking changes are only introduced in new dated versions.

    Key versioning rules:

    • Organization Pinning: Organizations are pinned to the current version at signup. Requests omitting the version header use the organization's pinned version.
    • SDK Pinning: Official SDK major releases hardcode a specific API version.
    • Deprecation: Deprecated versions have a minimum 12-month window before sunset. Deprecated responses include Deprecation and Sunset headers.
  6. Choose the correct Ticketlayer credential based on environment

    Ticketlayer provides different credentials depending on where your code is executing and what it needs to access:

    • Publishable keys (tlpk_): Used in browsers, mobile apps, and site builders. Used for reading sales channel data, creating carts, and starting checkouts via the Live API.
    • Organisation API keys (tlak_): Used on your server. Used for administrative tasks on the Backstage API (events, orders, customers, webhooks, embed sessions) based on assigned scopes.
    • Secret keys (tlsk_): Server-only siblings of publishable keys. Used by a backend to interact with the sales surface on a customer's behalf. These must never be exposed to a browser.
    • Staff access tokens (JWT): Used by staff tools, Backstage, and MCP agents. Permissions are based on the signed-in user's role.
  7. Install Ticketlayer in a Vite + React project

    To set up Ticketlayer in a React project using Vite, install the core live client and the elements library. Configure the environment variables in a .env file to provide the API URL, checkout base URL, and your public publishable key.
    npm create vite@latest my-tickets -- --template react-ts
    cd my-tickets
    npm install @ticketlayer/live @ticketlayer/elements @ticketlayer/elements-react
    VITE_LIVE_API_URL=https://live.staging.t9r.dev
    VITE_CHECKOUT_BASE=https://hbo.staging.t9r.dev
    VITE_TL_PUBLISHABLE_KEY=tlpk_...
  8. Install Ticketlayer Elements for React

    Install the required packages via npm. Call defineCustomElements() once after hydration and initialize the Live client using createLiveClient. Elements are available as React components via the @ticketlayer/elements-react package.
    npm install @ticketlayer/live @ticketlayer/elements @ticketlayer/elements-react
    import { createLiveClient } from '@ticketlayer/live';
    import { defineCustomElements, TlEventList } from '@ticketlayer/elements-react';
    
    defineCustomElements(); // once, after hydration
    await createLiveClient({ baseUrl: 'https://live.staging.t9r.dev', publishableKey: 'tlpk_...' });
    
    <TlEventList columns={3} onTlEventClick={(e) => console.log(e.detail.eventId)} />
  9. Set up events for sale in Ticketlayer

    To sell tickets, you must first create an event in the Backstage admin area. An event requires at least one occurrence (date and time) and a price scheme (ticket types and prices). Once configured, the event must be set to 'on sale'.

    For automation, use the following API endpoints:

    • Create event: POST /v1/events
    • Create occurrence: POST /v1/events/{eventId}/occurrences
    • Create price scheme: POST /v1/events/{eventId}/price-schemes
  10. Verify Ticketlayer Webhook Signatures

    To ensure a request comes from Ticketlayer, verify the Ticketlayer-Signature header using the signing secret provided during endpoint registration.

    Verification Logic:

    1. The signature is an HMAC-SHA256 of the string "<t>.<raw body>" (where <t> is the timestamp from the header), hex encoded.
    2. Reject deliveries where the timestamp t is more than five minutes (300 seconds) from the current time.
    3. Crucial: Compute the HMAC over the raw request body before any JSON parsing.

    Implementation Example (Node.js/Express):

    import crypto from 'node:crypto';
    
    export function verifyTicketlayerSignature(rawBody: string, header: string, secret: string, toleranceSeconds = 300): boolean {
      const parts = Object.fromEntries(header.split(',').map((kv) => kv.split('=').map((s) => s.trim())));
      const t = Number(parts.t);
      const v1 = parts.v1;
      if (!t || !v1) return false;
      if (Math.abs(Math.floor(Date.now() / 1000) - t) > toleranceSeconds) return false;
      const expected = crypto.createHmac('sha256', secret).update(`${t}.${rawBody}`).digest('hex');
      const a = Buffer.from(v1, 'hex');
      const b = Buffer.from(expected, 'hex');
      return a.length === b.length && crypto.timingSafeEqual(a, b);
    }
    
    // Express usage
    app.post('/webhooks/ticketlayer', express.raw({ type: 'application/json' }), (req, res) => {
      const raw = req.body.toString('utf8');
      if (!verifyTicketlayerSignature(raw, req.get('Ticketlayer-Signature') ?? '', process.env.TL_WEBHOOK_SECRET!)) {
        return res.status(400).send('bad signature');
      }
      const envelope = JSON.parse(raw);
      if (envelope.type === 'order.confirmed') {
        // handle order.confirmed
      }
      res.sendStatus(204);
    });
  11. Install Ticketlayer packages for Next.js

    To integrate Ticketlayer into a Next.js project, install the core SDK, the base elements, and the React wrappers for those elements.
    npm install @ticketlayer/live @ticketlayer/elements @ticketlayer/elements-react
  12. Initialize Ticketlayer client in React

    Initialize the Ticketlayer client and define custom elements at the application entry point (e.g., main.tsx). Use createLiveClient to configure the connection and set up event listeners for checkout completion.
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { createLiveClient } from '@ticketlayer/live';
    import { defineCustomElements } from '@ticketlayer/elements-react';
    import App from './App';
    
    defineCustomElements();
    
    createLiveClient({
      baseUrl: import.meta.env.VITE_LIVE_API_URL,
      publishableKey: import.meta.env.VITE_TL_PUBLISHABLE_KEY,
      checkout: { mode: 'modal', embedBaseUrl: import.meta.env.VITE_CHECKOUT_BASE },
    }).then((tl) => {
      tl.on('checkout:completed', (order: { id: string }) => {
        window.location.href = `/thanks?orderId=${encodeURIComponent(order.id)}`;
      });
    });
    
    ReactDOM.createRoot(document.getElementById('root')!).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    );