Add seat selection & booking to your site

 ┌───────────────────── YOUR WEBSITE (browser) ──────────────────────┐
 │  <SeatStudioViewer>  — renders the map, live availability built in │
 │       │                                                            │
 │       │ customer selects a seat → the chart reserves it for you    │
 │       ▼                                                            │
 │  onSelectionChange(selection)  — you get items + holdToken + total │
 └───────────────────────────────────┬────────────────────────────────┘
                                      │  POST selection + holdToken
                                      ▼
 ┌────────────────────────── YOUR SERVER ────────────────────────────┐
 │  take payment  →  POST /actions/book   (Bearer <api token>)         │
 │  refunds / cancellations → POST /actions/release                   │
 └────────────────────────────────────────────────────────────────────┘

region      = us | ca | br | eu | uk | za | kr | au
eventCode   = SHOW-2026-001
apiToken    = <secret, server-side only>
API base    = https://api-<region>.seatstudio.io

<div id="seatmap" style="width:100%;height:640px"></div>

<!-- Import from YOUR region's URL (this example is region "br"). -->
<link rel="stylesheet" href="https://map-br.seatstudio.io/seatstudio-viewer.css" />
<script src="https://map-br.seatstudio.io/seatstudio-viewer.js"></script>
<script>
  SeatStudioViewer.mount('#seatmap', {
    config: {
      eventCode: 'SHOW-2026-001',
      showCart: true,
      sectors: [
        { sectorCode: 'plateia', maxSelection: 8, tickets: [
          { code: 'full', title: 'Standard', price: { amount: 15000, currency: 'BRL' } },
          { code: 'half', title: 'Reduced',  price: { amount: 7500,  currency: 'BRL' } },
        ]},
        { sectorCode: 'pista', maxSelection: 10, tickets: [
          { code: 'full', title: 'Standard', price: { amount: 20000, currency: 'BRL' } },
        ]},
      ],
    },
    onSelectionChange: (selection) => {
      // Fires on every change. When ready to pay, send this to your server.
      console.log(selection.items, selection.holdToken, selection.total);
    },
  });
</script>

curl -X POST "https://api-br.seatstudio.io/events/SHOW-2026-001/actions/book" \
  -H "Authorization: Bearer $SEATSTUDIO_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "holdToken": "<holdToken from the selection>",
    "orderId": "order_42",
    "objects": [
      { "sector": "plateia", "seat": "A12" },
      { "sector": "pista",   "quantity": 2 }
    ]
  }'

<!-- Replace <region> with yours: br, eu, kr, au (or use map.seatstudio.io for us). -->
<link rel="stylesheet" href="https://map-<region>.seatstudio.io/seatstudio-viewer.css" />
<script src="https://map-<region>.seatstudio.io/seatstudio-viewer.js"></script>

<link rel="stylesheet" href="https://map-eu.seatstudio.io/seatstudio-viewer.css" />
<script src="https://map-eu.seatstudio.io/seatstudio-viewer.js"></script>

SeatStudioViewer.mount(target, options) → handle

{
  "eventCode": "SHOW-2026-001",
  "region": "br",
  "showCart": true,
  "showSectorsList": false,
  "hideTicketModal": false,
  "sectors": [
    {
      "sectorCode": "plateia",
      "soldOut": false,
      "maxSelection": 8,
      "lotId": "phase-1",
      "lotTitle": "Phase 1",
      "tickets": [
        {
          "code": "full",
          "title": "Standard",
          "description": "Adults",
          "soldOut": false,
          "price": { "amount": 15000, "currency": "BRL" }
        }
      ]
    }
  ]
}

{
  "eventCode": "SHOW-2026-001",
  "holdToken": "9f3c…",
  "count": 3,
  "total": { "amount": 35000, "currency": "BRL" },
  "items": [
    {
      "type": "seat",
      "sectorCode": "plateia",
      "seatId": "plateia-A4",
      "seatLabel": "A4",
      "ticketCode": "full",
      "ticketTitle": "Standard",
      "lotId": "phase-1",
      "lotTitle": "Phase 1",
      "price": { "amount": 15000, "currency": "BRL" }
    },
    {
      "type": "ga",
      "sectorCode": "pista",
      "quantity": 2,
      "ticketCode": "full",
      "ticketTitle": "Standard",
      "price": { "amount": 10000, "currency": "BRL" }
    }
  ]
}

function selectionToObjects(selection) {
  return (selection.items || []).map(it =>
    it.type === 'ga'
      ? { sector: it.sectorCode, quantity: it.quantity }
      : { sector: it.sectorCode, seat: it.seatLabel });
}

import { useEffect, useRef } from 'react';
import { mount } from '@seatstudio/viewer';

export function SeatPicker({ config, onSelectionChange }) {
  const ref = useRef(null);
  useEffect(() => {
    const handle = mount(ref.current, { config, onSelectionChange, locale: 'en' });
    return () => handle.unmount();
  }, [config, onSelectionChange]);
  return <div ref={ref} style={{ width: '100%', height: 640 }} />;
}

let current = null;
SeatStudioViewer.mount('#seatmap', {
  config,
  onSelectionChange: (sel) => { current = sel; },
});

document.querySelector('#pay').addEventListener('click', async () => {
  if (!current?.items.length) return;
  await fetch('/api/checkout', {                 // YOUR endpoint
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      eventCode: current.eventCode,
      holdToken: current.holdToken,
      items: current.items,
    }),
  });
  // your /api/checkout then takes payment and calls Seat Studio's `book`.
});

<?php // event.php — render the seating chart for one of your events
$region    = 'eu';                 // your account region
$event     = get_event_from_db($_GET['id']);   // your data layer

$config = [
  'eventCode' => $event->id,       // your internal event ID
  'showCart'  => true,
  'sectors'   => array_map(fn($s) => [
    'sectorCode'   => $s->id,       // your internal sector ID
    'maxSelection' => 8,
    'tickets'      => array_map(fn($t) => [
      'code'  => $t->id,           // your internal ticket-type ID
      'title' => $t->name,
      'price' => ['amount' => $t->cents, 'currency' => 'EUR'],
    ], $s->ticket_types),
  ], $event->sectors),
];
?>
<div id="seatmap" style="width:100%;height:640px"></div>
<button id="pay">Pay</button>

<link rel="stylesheet" href="https://map-<?= $region ?>.seatstudio.io/seatstudio-viewer.css" />
<script src="https://map-<?= $region ?>.seatstudio.io/seatstudio-viewer.js"></script>
<script>
  SeatStudioViewer.mount('#seatmap', {
    config: <?= json_encode($config, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>,
    onSelectionChange: (sel) => { window.__sel = sel; },
  });

  document.getElementById('pay').addEventListener('click', async () => {
    const sel = window.__sel;
    if (!sel?.items.length) return;
    await fetch('/checkout.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ eventCode: sel.eventCode, holdToken: sel.holdToken, items: sel.items }),
    });
  });
</script>

<?php // checkout.php — confirm the sale with the booking API (server-side)
$in       = json_decode(file_get_contents('php://input'), true);
$region   = 'eu';
$apiBase  = "https://api-$region.seatstudio.io";
$apiToken = getenv('SEATSTUDIO_API_TOKEN');     // server-side only — never in the browser

// ... take payment here ...

// map the viewer selection → API objects
$objects = array_map(fn($it) =>
  $it['type'] === 'ga'
    ? ['sector' => $it['sectorCode'], 'quantity' => $it['quantity']]
    : ['sector' => $it['sectorCode'], 'seat' => $it['seatLabel']],
  $in['items']);

$ch = curl_init("$apiBase/events/" . rawurlencode($in['eventCode']) . "/actions/book");
curl_setopt_array($ch, [
  CURLOPT_POST           => true,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTPHEADER     => ["Authorization: Bearer $apiToken", 'Content-Type: application/json'],
  CURLOPT_POSTFIELDS     => json_encode([
    'objects'   => $objects,
    'holdToken' => $in['holdToken'] ?? null,
    'orderId'   => 'order_42',
  ]),
]);
$result = json_decode(curl_exec($ch), true);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// 200 + empty failed[] = sale confirmed; otherwise inspect $result['failed']
if ($status === 200 && empty($result['failed'])) {
  echo json_encode(['ok' => true]);
} else {
  http_response_code(409);
  echo json_encode(['ok' => false, 'failed' => $result['failed'] ?? null]);
}

const handle = SeatStudioViewer.mount('#seatmap', {
  config: { ...config, hideTicketModal: true },
  onSelectRequest: (req) => {
    // req = { mode, sectorCode, sectorName, sectorColor,
    //         seatId, seatLabel, seatRow, seatNum, lotTitle, tickets }
    // mode: 'seat' or 'ga'. Show your own picker, then resolve it:
    myTicketPicker.open(req, {
      onPick:    (ticketCode)        => handle.pickTicket(ticketCode),
      onChangeGa:(ticketCode, delta) => handle.changeGa(req.sectorCode, ticketCode, delta),
      onCancel:  ()                  => handle.cancelPending(),
    });
  },
  onSelectionChange: (sel) => { /* confirmed items land here as usual */ },
});

Base URL:  https://api-<region>.seatstudio.io     (us | ca | br | eu | uk | za | kr | au)
Auth:      Authorization: Bearer <api token>
Body:      application/json

Authorization: Bearer eyJ…

"objects": [
  { "sector": "plateia", "seat": "A12" },   // seat: sector + seat
  { "sector": "pista",   "quantity": 2 }     // GA:   sector + quantity (default 1)
]

   free ──hold──▶ reserved ──book──▶ booked
    ▲   ◀─release-hold─┘    ◀──release──┘
    │
    └────────── (holds auto-expire back to free)
   blocked ◀── change-object-status (manual)

{
  "eventKey": "SHOW-2026-001",
  "changed": 2,
  "failed": [
    { "sector": "plateia", "seat": "A12", "reason": "not available to book", "currentStatus": "booked" }
  ],
  "holdToken": "9f3c…",          // holds only
  "holdExpiresAt": 1780000900000  // holds only (epoch ms)
}

{
  "eventKey": "SHOW-2026-001",
  "seats": [
    { "sector": "plateia", "seat": "A12", "status": "booked", "orderId": "order_42", "updatedAt": 1780000000000 }
  ],
  "generalAdmission": [
    { "sector": "pista", "capacity": 1000, "numReserved": 3, "numBooked": 10, "available": 987 }
  ]
}

{
  "objects": [{ "sector": "plateia", "seat": "A12" }],
  "holdToken": "9f3c…",       // optional: extend/reuse an existing reservation
  "expiresInSeconds": 900      // optional: hold lifetime
}

{
  "objects": [{ "sector": "plateia", "seat": "A12" }],
  "holdToken": "9f3c…"
}

{
  "objects": [
    { "sector": "plateia", "seat": "A12" },
    { "sector": "pista",   "quantity": 2 }
  ],
  "holdToken": "9f3c…",   // optional: confirm a prior reservation
  "orderId": "order_42"    // optional: your order id, stored on the objects
}

{ "objects": [{ "sector": "plateia", "seat": "A12" }] }

{ "objects": [{ "sector": "plateia", "seat": "A12" }], "status": "blocked", "holdToken": "9f3c…" }

{ "sectors": [{ "sector": "pista", "capacity": 1000 }, { "sector": "vip", "capacity": 200 }] }

{ "sector": "plateia", "seat": "A12", "status": "reservedByToken", "holdToken": "9f3c…", "orderId": null, "updatedAt": 1780000000000 }

{ "holdToken": "9f3c…", "expiresAt": 1780000900000 }

region     = us | ca | br | eu | uk | za | kr | au
API base   : https://api-<region>.seatstudio.io
Auth header: Authorization: Bearer <api token>
Chart lib  : https://map-<region>.seatstudio.io/seatstudio-viewer.js (+ .css)
             (us is unprefixed: https://map.seatstudio.io/…)