Platform SDK Quickstart

Create a test inventory event, embed the picker, and commit inventory from your own backend.

SeatLayer’s SDK is the reserved-seating layer for a ticketing website: it draws the venue, shows live seat availability, and returns the exact seats a buyer picked. Adding it takes two steps: embed the picker in the browser with a public key, then confirm the booking from your own server with a secret key. Your platform keeps its checkout, its own payment provider, and its commercial orders, tickets, delivery, refunds, and check-in.

Packages

Surface	Package	Docs
JavaScript / TypeScript	`@seatlayer/js`	Install the Buyer SDK
React	`@seatlayer/react`	React SDK
Vue	`@seatlayer/vue`	Vue SDK
Angular	`@seatlayer/angular`	Angular SDK
React Native	`@seatlayer/react-native`	React Native SDK
Flutter	`seatlayer`	Flutter SDK
iOS	`seatlayer-ios` Swift package	iOS SDK
Android	`io.seatlayer:seatlayer-android` and `-android-compose`	Android SDK
Node.js (server)	`@seatlayer/server`	Node server SDK
Python (server)	`seatlayer`	Python server SDK
PHP (server)	`seatlayer/seatlayer-php`	PHP server SDK
Ruby (server)	`seatlayer`	Ruby server SDK
Java (server)	`io.seatlayer:seatlayer-java`	Java server SDK
.NET (server)	`SeatLayer`	.NET server SDK
Go (server)	`github.com/seatlayer/seatlayer-go`	Go server SDK

Current verified versions for every package live in the machine-readable SDK catalog. Install from there rather than copying a version number between packages.

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

yarn add @seatlayer/js@0

pnpm add @seatlayer/js@0

bun add @seatlayer/js@0

Authorize Public-sale browser access

Keep the pk_test_… public half of the key pair you used to create the event, and register your buyer site’s exact HTTPS origin under Embed domains in the dashboard. The public key is safe to publish in browser code; the matching sk_test_… is not.

On first render the SDK sends the event key, public key, and browser-provided origin directly to SeatLayer. SeatLayer verifies their account and test/live mode, creates a short-lived Public-sale-only session, and returns its in-memory bearer together with the chart and compact inventory status. There is no customer-backend token round trip on this path.

A public key cannot reveal presale, login, partner, or channel inventory. Those audiences still use an authenticated buyerAccessTokenProvider; an explicit provider or token always takes precedence over publicKey.

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-buyer.js"></script>
<script>
  const picker = new seatlayer.SeatPicker({
    container: "#picker",
    event: "<YOUR_EVENT_KEY>",
    publicKey: "<YOUR_PUBLIC_KEY>",
    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: "<YOUR_EVENT_KEY>",
  publicKey: "<YOUR_PUBLIC_KEY>",
  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="<YOUR_EVENT_KEY>"
      publicKey="<YOUR_PUBLIC_KEY>"
      style={{ height: 640 }}
      onCheckout={async (_, __, handoff) => {
        await fetch("/api/checkout", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ holdId: handoff.holdId }),
        });
      }}
    />
  );
}

Book inventory from your server

Resolve authoritative inventory and configured prices from the hold, complete your payment logic, then book inventory with the secret key. After success, create and deliver tickets from your own platform.

server/checkout.jsjs

const eventKey = "<YOUR_EVENT_KEY>";
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.

If you would rather have SeatLayer run checkout, tickets and the door instead of building them yourself, follow your first managed event for the direct-organizer route.

Packages

Next