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