Seat picker

The SeatPicker component inside a React app. Buyers pick seats, SeatLayer holds them, and your own checkout takes the payment.

Try it

Test mode

Pick seats on the map: Any open seat
Press the checkout button: SeatLayer holds the seats
See what your checkout gets: Shown under the map

No real money moves.Seats reset every night.

Loading the seat picker

What your checkout gets

After the buyer presses the checkout button

Pick seats and press the checkout button in the picker. What your checkout receives appears here.

Copy this code

components/PickerWidget.tsx

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

export function Checkout() {
  return (
    <SeatPicker
      event="<YOUR_EVENT_KEY>"
      publicKey="pk_test_..."
      currency="EUR"
      style={{ width: "100%", height: 740 }}
      onCheckout={(_hold, _seats, handoff) => {
        // Send only the hold id to your server.
        startCheckout({ holdId: handoff.holdId });
      }}
    />
  );
}