diff --git a/src/components/CheckoutOverlay.tsx b/src/components/CheckoutOverlay.tsx
index e2ffbdb..e4bdb3b 100644
--- a/src/components/CheckoutOverlay.tsx
+++ b/src/components/CheckoutOverlay.tsx
@@ -9,7 +9,10 @@ import { PaymentStep } from './checkout/PaymentStep';
 import { ReviewStep } from './checkout/ReviewStep';
 import { ConfirmationStep } from './checkout/ConfirmationStep';
 
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
+// Without a publishable key (local builds), loadStripe throws on every page that
+// imports this module. Elements accepts null and the payment step stays empty.
+const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
+const stripePromise = publishableKey ? loadStripe(publishableKey) : null;
 
 const STEPS: { id: CheckoutStep; label: string }[] = [
   { id: 'shipping', label: 'Shipping' },