stripe attempt #1: Refactor stripe key to be loaded in earlier

web/Dockerfile.auis

@@ -33,6 +33,7 @@ ENV VITE_API_URL="https://auis-api.fly.dev"
 ENV VITE_STRAPI_URL="https://auis-strapi.fly.dev"
 ENV VITE_APP_URL="https://auis.fly.dev"
 ENV VITE_APP_NAME="AUIS"
+ENV VITE_STRIPE_PUBLISHABLE_KEY=pk_test_51PPclyP464csY2UpQPZ4cpWlyupAwPXfvWZRIG0zy9BhlYE8GmR4LYEytjFKOjMS6o5oXF5I0QMB8RWcc0TqsNxC00Nz3UAH14
 
 # Mount secrets into Dockerfile and set environment variables
 RUN yarn run build   

web/src/screens/CheckoutScreen.tsx

@@ -1,19 +1,18 @@
 import { useCallback } from "react";
-import { loadStripe } from "@stripe/stripe-js";
 import {
   EmbeddedCheckoutProvider,
   EmbeddedCheckout,
 } from "@stripe/react-stripe-js";
 import { useLocation } from "react-router";
+import { stripeKey } from "../stripe/stripe";
 import { fetchEventOrMembershipCheckoutSecret } from "../api/apiRequests";
 import CheckoutError from "@components/checkout-page/CheckoutError";
 
-const STRIPE_PUBLISHABLE_KEY = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
-
 // Make sure to call `loadStripe` outside of a component’s render to avoid
 // recreating the `Stripe` object on every render.
-const stripePromise = loadStripe(`${STRIPE_PUBLISHABLE_KEY}`);
+const stripePromise = stripeKey;
 let bodyData: { priceId: string; userTicketId: number };
+
 export default function CheckoutScreen() {
   const location = useLocation();
   // ensure data required for checkout is here

web/src/stripe/stripe.ts

@@ -0,0 +1,7 @@
+import { loadStripe } from "@stripe/stripe-js";
+
+//import the key from the env
+const STRIPE_PUBLISHABLE_KEY = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
+
+//This is where we load the stripe key, then export it.
+export const stripeKey = await loadStripe(`${STRIPE_PUBLISHABLE_KEY}`);