diff --git a/client/src/components/BookingList/BookingCard/BookingCard.tsx b/client/src/components/BookingList/BookingCard/BookingCard.tsx
index d9ff850d222a2ca9e54a5d447a05d23a4205c61f..4b14a613fb22ce34a7a5f95d7b05aec4a0477c6f 100644
--- a/client/src/components/BookingList/BookingCard/BookingCard.tsx
+++ b/client/src/components/BookingList/BookingCard/BookingCard.tsx
@@ -21,10 +21,10 @@ function BookingCard({ flight }: IBookingCard) {
     const bookingInfo: BookingOrder = {
       flightId: flight.id,
       bookingClass: isEconomy ? 1 : 2,
+      price: isEconomy ? flight.economyPrice : flight.businessPrice
     };
     try {
-      await bookFlight(bookingInfo);
-      console.log("Flight ID:", flight.id); // Log the flight ID to the console
+      //await bookFlight(bookingInfo);
       alert("Flight booked successfully, navigating to payments page...");
       navigate('/booking/payment-form', { state: { bookingInfo } });
     } catch (error) {
diff --git a/client/src/components/PaymentForm/PaymentForm.tsx b/client/src/components/PaymentForm/PaymentForm.tsx
index ddcad44540f53b512db1eafec172411cc4af31b2..0c4eb50e42a61dca6ff82004cd3eeee552f16d38 100644
--- a/client/src/components/PaymentForm/PaymentForm.tsx
+++ b/client/src/components/PaymentForm/PaymentForm.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import Api from "../../helpers/Api";
 import { CardElement, useStripe, useElements, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import axios from 'axios';
@@ -23,19 +24,24 @@ const PaymentForm = () => {
     }, [location]);
 
     useEffect(() => {
+        if (!bookingInfo || clientSecret) return; 
+    
         const fetchClientSecret = async () => {
             try {
-                const response = await axios.post('http://localhost:4242/create-checkout-session');
+                let price = bookingInfo.price; 
+                let priceInCents = price * 100;
+                const form = { items: [{ price: priceInCents }] };
+                const response = await Api.post("Booking/create-payment-intent", form);
                 setClientSecret(response.data.clientSecret);
-                setLoading(false); // Set loading to false after client secret is fetched
+                setLoading(false);
             } catch (error) {
                 console.error('Failed to retrieve client secret:', error);
-                setLoading(false); // Set loading to false in case of error
+                setLoading(false);
             }
         };
-
+    
         fetchClientSecret();
-    }, []);
+    }, [bookingInfo, clientSecret]);
 
     const handleSubmit = async (event) => {
         event.preventDefault();
@@ -45,11 +51,11 @@ const PaymentForm = () => {
             return;
         }
 
-        setLoading(true); // Set loading to true when payment processing starts
+        setLoading(true); 
 
-        // Your payment processing logic goes here
+       
 
-        setLoading(false); // Set loading to false when payment processing is completed
+        setLoading(false); 
     };
 
     return (
diff --git a/client/src/services/BookingList/BookingOrder.ts b/client/src/services/BookingList/BookingOrder.ts
index a46318ce8af122c34284cdf93b5e910f624ae80c..10b040a36cd2d374aca8b33d9b5394e0c4a38d07 100644
--- a/client/src/services/BookingList/BookingOrder.ts
+++ b/client/src/services/BookingList/BookingOrder.ts
@@ -6,6 +6,7 @@ export interface BookingOrder {
   flightId: number;
   bookingClass: number;
   seatId?: number;
+  price: number;
 }
 
 export async function bookFlight(