Hosted examples: returnToPage for redirecting gateways

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

examples/hosted/collection.html

@@ -11,9 +11,12 @@
     date, then their seats. Only events you list publicly appear.
     Replace <YOUR_WORKSPACE_ID> (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/
   -->
-  <div data-seatlayer-collection="<YOUR_WORKSPACE_ID>">
+  <div data-seatlayer-collection="<YOUR_WORKSPACE_ID>" data-return-url="page">
     <a class="slc-fallback" href="https://app.seatlayer.io/e/<YOUR_EVENT_KEY>">View tickets on SeatLayer</a>
   </div>
   <script src="https://app.seatlayer.io/sl-event-collection@0.js" defer></script>

examples/hosted/event.html

@@ -11,13 +11,17 @@
     your own gateway, and the tickets.
     Replace <YOUR_EVENT_KEY> 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/
   -->
   <div
     data-seatlayer-event="<YOUR_EVENT_KEY>"
     data-layout="picker"
     data-checkout="hosted"
     data-height="740px"
+    data-return-url="page"
     data-fallback-url="https://app.seatlayer.io/e/<YOUR_EVENT_KEY>">
     <a href="https://app.seatlayer.io/e/<YOUR_EVENT_KEY>">Book tickets on SeatLayer</a>
   </div>

src/hosted/SeatLayerCollection.tsx

@@ -11,14 +11,20 @@ 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;
 }
 
 /**
  * Every upcoming public event in one workspace, listed on your page. Buyers
  * 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}
     >
       <a className="slc-fallback" href={fallbackUrl}>
         View tickets on SeatLayer

src/hosted/SeatLayerEvent.tsx

@@ -17,14 +17,20 @@ 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;
 }
 
 /**
  * Hosted Ticketing in React: the same one tag as the HTML version. SeatLayer
  * 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}
     >
       <a href={fallbackUrl}>Book tickets on SeatLayer</a>