added support for payment links

src/api/payment-service.ts

@@ -0,0 +1,54 @@
+import { API_BASE_URL, apiCall } from "./utils";
+
+export const getPaymentLink = async (orderId: string): Promise<string> => {
+  const jwtToken = localStorage.getItem("token");
+
+  if (!jwtToken) {
+    throw new Error("Authorization token not found. Please log in.");
+  }
+
+  try {
+    const response = await apiCall(`${API_BASE_URL}/api/payment/order/${orderId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${jwtToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to get payment link: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.paymentLink;
+  } catch (error) {
+    console.error("API Error getting payment link:", error);
+    throw error;
+  }
+};
+
+export const processPayment = async (paymentLink: string): Promise<void> => {
+  const jwtToken = localStorage.getItem("token");
+
+  if (!jwtToken) {
+    throw new Error("Authorization token not found. Please log in.");
+  }
+
+  try {
+    const response = await apiCall(`${API_BASE_URL}/api/payment/${paymentLink}`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${jwtToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to process payment: ${response.status} ${response.statusText}`);
+    }
+  } catch (error) {
+    console.error("API Error processing payment:", error);
+    throw error;
+  }
+};

src/pages/PaymentPage.tsx

@@ -8,6 +8,7 @@ import PaymentSummary from "./payment/PaymentSummary.tsx";
 import CreditCardIcon from "@mui/icons-material/CreditCard";
 import { Box, Typography, Container, Grid, Alert, Card, Button } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
+import { getPaymentLink, processPayment } from "../api/payment-service.ts";
 
 const PaymentPage: React.FC = () => {
   const navigate = useNavigate();
@@ -33,6 +34,8 @@ const PaymentPage: React.FC = () => {
       await clearFullCart();
       // Redirect to order confirmation page with security token
       if (orderId) {
+        const paymentLink = await getPaymentLink(orderId);
+        await processPayment(paymentLink);
         const confirmationToken = crypto.randomUUID();
         navigate(`/order-confirmation/${orderId}/${confirmationToken}`);
       } else {