Checkout handoff

Your own cart around the seat map, then the part with no browser in it: your server reads the hold back from SeatLayer and books it.

Try it

Test mode

Pick seats: They land in your own cart
Press Continue to checkout: The browser holds them
Watch your server's steps: Read the hold, then book

No real money moves.Seats reset every night.

Loading the seat map

Your cart

Pick a seat on the map to start.

The browser holds the seats

Pick seats and press Continue to checkout.

Your server reads the hold back

Seats and prices come from SeatLayer, never from the browser.

Your server books it

After your payment gateway confirms, book with your own order id.

Copy this code

components/SeatSelection.tsx

"use client";
import { useRef, useState } from "react";
import { SeatingChart, type SeatingChartHandle } from "@seatlayer/react";

export function OwnCart() {
  const chart = useRef<SeatingChartHandle>(null);
  const [seats, setSeats] = useState([]);

  async function continueToCheckout() {
    const hold = await chart.current?.hold();
    if (!hold) return showMessage("Those seats were just taken.");
    // The browser sends only the hold id. Your server does the rest.
    await fetch("/api/hold", {
      method: "POST",
      body: JSON.stringify({ holdId: hold.holdId }),
    });
  }

  return (
    <>
      <SeatingChart ref={chart} event="<YOUR_EVENT_KEY>" publicKey="pk_test_..."
        onSelectionChange={setSeats} />
      <button disabled={!seats.length} onClick={continueToCheckout}>Continue to checkout</button>
    </>
  );
}