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) => (
{describe(seat)}
- {formatUsd(seat.price ?? 0)}
+ {formatMoney(seat.price ?? 0)}
))}
@@ -25,7 +25,7 @@ export function SelectionSummary({ seats, total }: SelectionSummaryProps) {
Total for {seats.length} {seats.length === 1 ? "seat" : "seats"}
- {formatUsd(total)}
+ {formatMoney(total)}
);
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) => (
{line.displayLabel ?? line.label}
- {formatUsd(line.unitPrice * line.quantity)}
+ {formatMoney(line.unitPrice * line.quantity, line.currency)}
))}
Total
- {formatUsd(handoff.total)}
+ {formatMoney(handoff.total, handoff.currency)}
Hold id: {handoff.holdId}