Show prices in the event's currency

.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=

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,15 +17,15 @@ 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>
       <p className="total">
         <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>
   );

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;

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 {

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">