feat: resolve the payment issue

components/shopping-cart/shoppingCart.jsx

@@ -15,8 +15,8 @@ import toast from "react-hot-toast";
 
 const ShoppingCart = () => {
   const [cartItems, setCartItems] = useState(null);
-
   const [error, setError] = useState(null);
+  const [shippingAddress, setShippingAddress] = useState(""); // New state for address
   const router = useRouter();
   const { cartFn } = useContext(ProductContext);
   const { formatPrice } = useCurrency();
@@ -25,10 +25,12 @@ const ShoppingCart = () => {
     const response = await authAxios.get("/orders/cart/");
     setCartItems(response.data);
   };
+
   useEffect(() => {
     getCart();
   }, []);
 
+
   const handleQuantityChange = async (variantId, designId, quantityChange) => {
     const response = await cartFn(variantId, designId, quantityChange);
     console.log(response)
@@ -80,17 +82,16 @@ const ShoppingCart = () => {
     return <EmptyCart />;
   }
 
-  const handlePaymentSuccess = async (response) => {
-    console.log("Payment Successful", response);
-
-    const { razorpay_payment_id, razorpay_order_id, razorpay_signature } = response;
-
+  const handleRazorpayPaymentSuccess = async (response) => {
+    console.log("Razorpay Payment Successful", response);
+    
     try {
       const paymentData = {
-        paymentId: razorpay_payment_id,
-        orderId: razorpay_order_id,
-        signature: razorpay_signature,
+        paymentId: response.razorpay_payment_id,
+        orderId: response.razorpay_order_id,
+        signature: response.razorpay_signature,
         cartId: cartItems[0].id,
+        address: response.address,
       };
 
       const apiResponse = await authAxios.post("/orders/payment/", paymentData);
@@ -98,11 +99,40 @@ const ShoppingCart = () => {
       toast.success("Your Order Is Successful!");
       console.log(apiResponse);
     } catch (error) {
-      console.error("Error processing payment:", error);
+      console.error("Error processing Razorpay payment:", error);
       toast.error("Payment processing failed. Please try again.");
     }
   };
 
+  const handlePayPalPaymentSuccess = async (order) => {
+    console.log("PayPal Payment Successful", order);
+
+    try {
+      const paymentData = {
+        paymentId: order.id,
+        payerEmail: order.payer.email_address,
+        cartId: cartItems[0].id,
+        address: shippingAddress, // Include the shipping address
+      };
+
+      const apiResponse = await authAxios.post("/orders/payment/", paymentData);
+      router.push("/accounts/profile/orders");
+      toast.success("Your Order Is Successful!");
+      console.log(apiResponse);
+    } catch (error) {
+      console.error("Error processing PayPal payment:", error);
+      toast.error("Payment processing failed. Please try again.");
+    }
+  };
+
+  if (!cartItems) {
+    return null;
+  }
+
+  if (!cartItems[0]?.items?.length) {
+    return <EmptyCart />;
+  }
+
   return (
     <div className="w-full bg-white">
       <div className="w-full px-4 md:px-8 max-w-[1600px] mx-auto font-['Inter']">
@@ -241,9 +271,16 @@ const ShoppingCart = () => {
               </span>
             </label>
 
+            {/* Payment Component for Razorpay and PayPal */}
             <PaymentComponent
               amount={cartItems[0].total_amount}
-              onSuccess={handlePaymentSuccess}
+              onSuccess={(response) => {
+                if (response.razorpay_payment_id) {
+                  handleRazorpayPaymentSuccess(response);
+                } else {
+                  handlePayPalPaymentSuccess(response);
+                }
+              }}
             />
           </div>
         </div>