@seatschart/react

React bindings for SeatsChart iframe embeds and checkout handoff.

Install

npm install @seatschart/react @seatschart/embed

Seat map iframe

import { SeatMapEmbed } from "@seatschart/react";

export function CheckoutSeats({ jwt }: { jwt: string }) {
  return (
    <SeatMapEmbed
      webBase="https://your-tenant.seatschart.com"
      eventId="00000000-0000-0000-0000-000000000000"
      parentOrigin="https://checkout.yourplatform.com"
      token={jwt}
      channel="web"
      transparent
      height={640}
    />
  );
}

Hold listener hook

import { useSeatHoldListener } from "@seatschart/react";

useSeatHoldListener({
  parentOrigin: "https://checkout.yourplatform.com",
  onHeld(payload) {
    router.push(`/pay?hold=${payload.holdToken}`);
  },
});