diff --git a/pages/api/webhook.ts b/pages/api/webhook.ts
index 49b534b..5dab584 100644
--- a/pages/api/webhook.ts
+++ b/pages/api/webhook.ts
@@ -21,7 +21,7 @@ export const config: config = {
     },
 };
 
-export default async (
+const webhookHandler = async (
     request: NextApiRequest,
     response: NextApiResponse
 ): Promise<void> => {
@@ -102,3 +102,4 @@ function createOrder(customer: any, session: stripeSession): void {
         });
     });
 }
+export default webhookHandler;
diff --git a/pages/checkout/new-checkout-session.tsx b/pages/checkout/new-checkout-session.tsx
index 449c5a0..70527ce 100644
--- a/pages/checkout/new-checkout-session.tsx
+++ b/pages/checkout/new-checkout-session.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext, useCallback } from 'react';
 import { Appearance, loadStripe, Stripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
 import CheckoutForm from '@/components/CheckoutForm';
 import { AppContext } from '@/context/AppContext';
 import { NextRouter, useRouter } from 'next/router';
-import { cart } from '@/interfaces/cart';
 
 const stripePromise: Promise<Stripe | null> = loadStripe(
     'pk_test_51NHEXnCgtXcc2Q70RVpnW27B2K9q2NSYP5VA9m7AMjaDpWtpXsVyH8ApqUe3dcoU7iln44Xih7zJgVdOMpTNNv6I00Z3xlQnlO'
@@ -15,7 +14,20 @@ export default function App() {
     const { cart } = useContext(AppContext);
     const router: NextRouter = useRouter();
 
-    async function fetchData() {
+    // async function fetchData() {
+    //     const response: Response = await fetch('/api/create-payment-intent', {
+    //         method: 'POST',
+    //         headers: { 'Content-Type': 'application/json' },
+    //         body: JSON.stringify({
+    //             cart: cart,
+    //             userData: JSON.stringify(router.query),
+    //         }),
+    //     });
+    //     const data = await response.json();
+    //     setClientSecret(data.clientSecret);
+    // }
+
+    const fetchData = useCallback(async () => {
         const response: Response = await fetch('/api/create-payment-intent', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -26,11 +38,11 @@ export default function App() {
         });
         const data = await response.json();
         setClientSecret(data.clientSecret);
-    }
+    }, [cart, router.query]);
 
     useEffect((): void => {
         if (cart.length > 0 && router.isReady) fetchData();
-    }, [cart, router.isReady]);
+    }, [cart, router.isReady, fetchData]);
 
     interface options {
         clientSecret: string;