Quickstart

This guide joins the two sides of a SeatLayer integration: the buyer SDK creates a short hold, then your server turns that hold into a permanent booking.

Create an event

Publish a chart in the Designer, then create a sandbox event from your server.

server/create-event.jsjs

const response = await fetch("https://api.seatlayer.io/v1/events", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    authorization: `Bearer ${process.env.SEATLAYER_SECRET_KEY}`,
  },
  body: JSON.stringify({
    chartId: "ch_grand_theatre",
    name: "Dress rehearsal",
  }),
});

const { meta } = await response.json();
console.log(meta.key); // ev_9f3a

Install the buyer SDK

Use the CDN directly or add the JavaScript package to your app.

npm i @seatlayer/js@^0.30.0

yarn add @seatlayer/js@^0.30.0

pnpm add @seatlayer/js@^0.30.0

bun add @seatlayer/js@^0.30.0

Embed the picker

Choose the integration that matches your frontend. All variants return the same holdId checkout handoff.

checkout.htmlhtml

<div id="picker" style="height: 640px"></div>
<script src="https://cdn.seatlayer.io/seatlayer-js@0/seatlayer.js"></script>
<script>
  const picker = new seatlayer.SeatPicker({
    container: "#picker",
    event: "ev_9f3a",
    onCheckout: async (_, __, handoff) => {
      await fetch("/api/checkout", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ holdId: handoff.holdId }),
      });
    },
  });
  picker.render();
</script>

checkout.jsjs

import { SeatPicker } from "@seatlayer/js";

const picker = new SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  onCheckout: async (_, __, handoff) => {
    await fetch("/api/checkout", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ holdId: handoff.holdId }),
    });
  },
});

await picker.render();

Checkout.tsxtsx

import { SeatPicker } from "@seatlayer/react";

export function Checkout() {
  return (
    <SeatPicker
      event="ev_9f3a"
      style={{ height: 640 }}
      onCheckout={async (_, __, handoff) => {
        await fetch("/api/checkout", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ holdId: handoff.holdId }),
        });
      }}
    />
  );
}

Book from your server

Resolve authoritative pricing from the hold, complete your payment logic, then book with the secret key.

server/checkout.jsjs

const eventKey = "ev_9f3a";
const headers = {
  authorization: `Bearer ${process.env.SEATLAYER_SECRET_KEY}`,
  "content-type": "application/json",
};

const holdResponse = await fetch(
  `https://api.seatlayer.io/v1/events/${eventKey}/holds/${holdId}`,
  { headers },
);
if (!holdResponse.ok) throw new Error("Hold is no longer active");
const hold = await holdResponse.json();

// Price from trusted hold items—not values posted by the browser.
const order = await createPaidOrder(hold.items);

const bookResponse = await fetch(
  `https://api.seatlayer.io/v1/events/${eventKey}/book`,
  {
    method: "POST",
    headers,
    body: JSON.stringify({
      holdId,
      bookingRef: order.id,
    }),
  },
);
if (!bookResponse.ok) await handleBookingFailure(bookResponse, order);

Use the complete checkout example as an implementation template, then read integration best practices before going live.

Next