From 35244e02b3624471fdf9bcc6058e86a90bd1ff86 Mon Sep 17 00:00:00 2001 From: navin10sharma <3096611+navin10sharma@users.noreply.github.com> Date: Sat, 26 Sep 2026 19:01:15 +0530 Subject: [PATCH] Hosted examples: returnToPage brings buyers back after Stripe SeatLayerEvent and SeatLayerCollection take an optional returnToPage prop, which adds data-return-url="page" to the tag. The HTML examples carry the attribute, and the comments and README say the site must be listed under Embed domains in the dashboard, or buyers finish on the SeatLayer event page. --- README.md | 5 +++++ examples/hosted/collection.html | 5 ++++- examples/hosted/event.html | 4 ++++ src/hosted/SeatLayerCollection.tsx | 9 ++++++++- src/hosted/SeatLayerEvent.tsx | 9 ++++++++- 5 files changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 29458dd..79fcdf8 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,11 @@ import { SeatLayerEvent } from "./hosted/SeatLayerEvent"; The React components load each script once per page and render again after a client-side route change. +To bring buyers back to your page after a payment that redirects, such as +Stripe, add `data-return-url="page"` to the tag (or pass `returnToPage` to the +React components) and list your site under Embed domains in the dashboard. +Without that, buyers finish on the SeatLayer event page. + ## SDK: the seat map in your app Each route in this app is one example. The same demos run live at diff --git a/examples/hosted/collection.html b/examples/hosted/collection.html index 8c11bcc..590f71c 100644 --- a/examples/hosted/collection.html +++ b/examples/hosted/collection.html @@ -11,9 +11,12 @@ date, then their seats. Only events you list publicly appear. Replace (ws_...) with your workspace id. Optional: data-layout="list" or "calendar". + data-return-url="page" brings buyers back to this page after a payment that + redirects, such as Stripe. List your site under Embed domains in the + dashboard; otherwise buyers finish on the SeatLayer event page. Try it live: https://seatlayer.io/demo/hosted/multi-date/ --> -
+
View tickets on SeatLayer
diff --git a/examples/hosted/event.html b/examples/hosted/event.html index fc0251f..730f3fc 100644 --- a/examples/hosted/event.html +++ b/examples/hosted/event.html @@ -11,6 +11,9 @@ your own gateway, and the tickets. Replace with the key from the event's page in the dashboard. data-layout: picker (the seat map on your page), or card, banner, button. + data-return-url="page" brings buyers back to this page after a payment that + redirects, such as Stripe. List your site under Embed domains in the + dashboard; otherwise buyers finish on the SeatLayer event page. Try it live: https://seatlayer.io/demo/hosted/paid-event/ -->
Book tickets on SeatLayer
diff --git a/src/hosted/SeatLayerCollection.tsx b/src/hosted/SeatLayerCollection.tsx index e07de14..7f0b09b 100644 --- a/src/hosted/SeatLayerCollection.tsx +++ b/src/hosted/SeatLayerCollection.tsx @@ -11,6 +11,12 @@ interface SeatLayerCollectionProps { layout?: "grid" | "list" | "calendar"; /** Where buyers go if the script cannot load. */ fallbackUrl: string; + /** + * Bring buyers back to this page after a payment that redirects, such as + * Stripe. Your site must be listed under Embed domains in the dashboard; + * otherwise buyers finish on the SeatLayer event page. + */ + returnToPage?: boolean; } /** @@ -18,7 +24,7 @@ interface SeatLayerCollectionProps { * pick a date, then their seats. Only events you list publicly appear. * Try it live: https://seatlayer.io/demo/hosted/multi-date/ */ -export function SeatLayerCollection({ workspaceId, layout = "grid", fallbackUrl }: SeatLayerCollectionProps) { +export function SeatLayerCollection({ workspaceId, layout = "grid", fallbackUrl, returnToPage = false }: SeatLayerCollectionProps) { useEffect(() => { loadSeatLayerScript(COLLECTION_SRC, "SeatLayerCollections"); }, [workspaceId]); @@ -28,6 +34,7 @@ export function SeatLayerCollection({ workspaceId, layout = "grid", fallbackUrl key={workspaceId} data-seatlayer-collection={workspaceId} data-layout={layout === "grid" ? undefined : layout} + data-return-url={returnToPage ? "page" : undefined} > View tickets on SeatLayer diff --git a/src/hosted/SeatLayerEvent.tsx b/src/hosted/SeatLayerEvent.tsx index 6963b22..904d21f 100644 --- a/src/hosted/SeatLayerEvent.tsx +++ b/src/hosted/SeatLayerEvent.tsx @@ -17,6 +17,12 @@ interface SeatLayerEventProps { height?: string; /** Where buyers go if the script cannot load: your event's booking page. */ fallbackUrl: string; + /** + * Bring buyers back to this page after a payment that redirects, such as + * Stripe. Your site must be listed under Embed domains in the dashboard; + * otherwise buyers finish on the SeatLayer event page. + */ + returnToPage?: boolean; } /** @@ -24,7 +30,7 @@ interface SeatLayerEventProps { * runs the seat map, the payment through your own gateway and the tickets. * Try it live: https://seatlayer.io/demo/hosted/paid-event/ */ -export function SeatLayerEvent({ eventKey, layout = "picker", height = "740px", fallbackUrl }: SeatLayerEventProps) { +export function SeatLayerEvent({ eventKey, layout = "picker", height = "740px", fallbackUrl, returnToPage = false }: SeatLayerEventProps) { useEffect(() => { loadSeatLayerScript(WIDGET_SRC, "SeatLayerEvents"); }, [eventKey]); @@ -36,6 +42,7 @@ export function SeatLayerEvent({ eventKey, layout = "picker", height = "740px", data-layout={layout} data-checkout="hosted" data-height={layout === "picker" ? height : undefined} + data-return-url={returnToPage ? "page" : undefined} data-fallback-url={fallbackUrl} > Book tickets on SeatLayer