+ Pass a category key from your published chart as the second argument, for example{" "}
+ bestAvailable(2, "stalls").
+
- The buyer SDK selects seats and creates a hold. A hold is a short, - revocable claim on inventory: it is not a ticket and it is not a payment. The - browser ends up with an opaque hold id and a display-only set of line items. It - never has booking authority. -
- -- Your server holds the secret key. It reads the hold back from SeatLayer to get the - authoritative seats and prices, creates your own checkout session for that amount - with your own payment gateway, and books the hold once the payment has succeeded. - Your own order id is passed as the booking reference, which is what makes a repeat - of the same request safe: an unknown outcome is reconciled by repeating it with the - same reference, never by generating a new one. -
- -app/api/hold/route.ts inspects the hold and books it. The server SDK
- path runs only when SEATLAYER_SECRET_KEY is set.
- app/api/events/route.ts serves the events you configure, and reads
- their real names with the same key when it is present.
- components/SeatPickerFlow.tsx is the browser side that produces the
- hold id in the first place.
- - More: - Idempotency and conflicts - {" "} - and the Node server SDK. -
-
+ Set SEATLAYER_SECRET_KEY in .env.local. It is read only inside the route
+ handler and never sent to the browser.
+
+ Set up to three event keys in .env.local. With a secret key on the server, the route
+ reads each event's real name.
+
+ The seat map inside your own React app. Buyers pick seats, SeatLayer holds them, and your own + checkout takes the payment. Pick a demo, try it, then copy the code. +
+
+ Use a published season key (sea_) and a pk_test_ key from your dashboard.
+
+ Use your event key and a pk_test_ key from your dashboard. Keep the sk_{" "}
+ secret key on your server.
+
Loading the seat map
, + loading: () =>Loading the seat map
, }); -const quantities = [1, 2, 3, 4, 5, 6, 7, 8]; - /** * Best available for a group. * * `bestAvailable(quantity, categoryKey?)` asks the server to find an adjacent * block and hold it in the same call. It resolves to null when no such block * exists, which is not the same answer as sold out, so the two are worded - * differently below. - * - * The category filter is a plain field: the buyer SDK exposes the category on - * each selected seat, not a list of the chart's categories, so the stable - * category key from the published chart is typed in. + * differently below. Pass a category key from your published chart as the + * second argument to search one price band only. */ export function BestAvailableFlow() { const chartRef = useRef