From 6b86de3378d63b5f93d60cfdd7d8ddb8a53c5764 Mon Sep 17 00:00:00 2001
From: Ratchet7x5 <36789694+Ratchet7x5@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:43:05 +1300
Subject: [PATCH] stripe attempt #1: Refactor stripe key to be loaded in
 earlier

---
 web/Dockerfile.auis                | 1 +
 web/src/screens/CheckoutScreen.tsx | 7 +++----
 web/src/stripe/stripe.ts           | 7 +++++++
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 web/src/stripe/stripe.ts

diff --git a/web/Dockerfile.auis b/web/Dockerfile.auis
index 6d350af..1c67b25 100644
--- a/web/Dockerfile.auis
+++ b/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   
diff --git a/web/src/screens/CheckoutScreen.tsx b/web/src/screens/CheckoutScreen.tsx
index 7c2581c..67c7508 100644
--- a/web/src/screens/CheckoutScreen.tsx
+++ b/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
diff --git a/web/src/stripe/stripe.ts b/web/src/stripe/stripe.ts
new file mode 100644
index 0000000..5f7a8e1
--- /dev/null
+++ b/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}`);