From 7f3e5454aa23e4f71ac81c38ebb6b5175f5e3cdd Mon Sep 17 00:00:00 2001
From: navin10sharma <3096611+navin10sharma@users.noreply.github.com>
Date: Sat, 26 Sep 2026 10:02:49 +0530
Subject: [PATCH] Prices in the event's currency, not always USD

VITE_SEATLAYER_CURRENCY (ISO 4217, default USD) sets the currency for the
selection; handed-off lines use the currency the server returns.
---
 .env.example                        |  4 ++++
 src/components/SelectionSummary.tsx |  6 +++---
 src/lib/config.ts                   |  7 +++++--
 src/lib/money.ts                    | 14 ++++++--------
 src/routes/SeatPickerRoute.tsx      |  6 +++---
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/.env.example b/.env.example
index 8b7e8fd..e0b127f 100644
--- a/.env.example
+++ b/.env.example
@@ -12,3 +12,7 @@ VITE_SEATLAYER_EVENT_KEY_3=
 
 # Optional. A published season key for the season tickets route.
 VITE_SEATLAYER_SEASON_KEY=
+
+# Optional. The currency your event is priced in, for showing prices before a
+# hold (ISO 4217, for example EUR). Defaults to USD.
+VITE_SEATLAYER_CURRENCY=
diff --git a/src/components/SelectionSummary.tsx b/src/components/SelectionSummary.tsx
index 7aca7a3..639b933 100644
--- a/src/components/SelectionSummary.tsx
+++ b/src/components/SelectionSummary.tsx
@@ -1,5 +1,5 @@
 import type { SelectedSeat } from "@seatlayer/react";
-import { formatUsd } from "../lib/money";
+import { formatMoney } from "../lib/money";
 
 interface SelectionSummaryProps {
   seats: SelectedSeat[];
@@ -17,7 +17,7 @@ export function SelectionSummary({ seats, total }: SelectionSummaryProps) {
         {seats.map((seat) => (
           <li key={seat.id}>
             <span>{describe(seat)}</span>
-            <span className="price">{formatUsd(seat.price ?? 0)}</span>
+            <span className="price">{formatMoney(seat.price ?? 0)}</span>
           </li>
         ))}
       </ul>
@@ -25,7 +25,7 @@ export function SelectionSummary({ seats, total }: SelectionSummaryProps) {
         <span>
           Total for {seats.length} {seats.length === 1 ? "seat" : "seats"}
         </span>
-        <span className="price">{formatUsd(total)}</span>
+        <span className="price">{formatMoney(total)}</span>
       </p>
     </div>
   );
diff --git a/src/lib/config.ts b/src/lib/config.ts
index f5120d2..fca0f8e 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -8,8 +8,11 @@ export const publicKey = import.meta.env.VITE_SEATLAYER_PUBLIC_KEY ?? "";
 /** A published Season key (sea_...) for the Season route. Optional. */
 export const seasonKey = import.meta.env.VITE_SEATLAYER_SEASON_KEY ?? "";
 
-/** Prices in this example are shown in USD. */
-export const currency = "USD";
+/**
+ * The currency your event is priced in (ISO 4217), used to show seat prices
+ * before a hold. Once seats are held, the server's own currency is used.
+ */
+export const currency = import.meta.env.VITE_SEATLAYER_CURRENCY || "USD";
 
 export const isConfigured = eventKey.length > 0 && publicKey.length > 0;
 export const isSeasonConfigured = seasonKey.length > 0;
diff --git a/src/lib/money.ts b/src/lib/money.ts
index b7b9053..978fc2c 100644
--- a/src/lib/money.ts
+++ b/src/lib/money.ts
@@ -1,13 +1,11 @@
+import { currency as eventCurrency } from "./config";
+
 /**
- * Seat prices arrive in major currency units, so 45 means $45.00.
+ * Seat prices arrive in major currency units, so 45 means 45.00 in the
+ * event's currency.
  */
-const formatter = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-});
-
-export function formatUsd(amount: number): string {
-  return formatter.format(amount);
+export function formatMoney(amount: number, currency: string = eventCurrency): string {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
 }
 
 export function formatClock(msRemaining: number): string {
diff --git a/src/routes/SeatPickerRoute.tsx b/src/routes/SeatPickerRoute.tsx
index 9011e5e..99321f2 100644
--- a/src/routes/SeatPickerRoute.tsx
+++ b/src/routes/SeatPickerRoute.tsx
@@ -3,7 +3,7 @@ import { SeatPicker } from "@seatlayer/react";
 import type { CheckoutHandoff, HoldResult, SeatPickerHandle } from "@seatlayer/react";
 import { RouteIntro } from "../components/RouteIntro";
 import { SetupNotice } from "../components/SetupNotice";
-import { formatUsd } from "../lib/money";
+import { formatMoney } from "../lib/money";
 import { currency, eventKey, isConfigured, publicKey } from "../lib/config";
 
 /**
@@ -59,13 +59,13 @@ export function SeatPickerRoute() {
                   {handoff.lineItems.map((line) => (
                     <li key={line.label}>
                       <span>{line.displayLabel ?? line.label}</span>
-                      <span className="price">{formatUsd(line.unitPrice * line.quantity)}</span>
+                      <span className="price">{formatMoney(line.unitPrice * line.quantity, line.currency)}</span>
                     </li>
                   ))}
                 </ul>
                 <p className="total">
                   <span>Total</span>
-                  <span className="price">{formatUsd(handoff.total)}</span>
+                  <span className="price">{formatMoney(handoff.total, handoff.currency)}</span>
                 </p>
                 <p className="muted small">Hold id: {handoff.holdId}</p>
                 <p className="muted">