refactor: resolve payment issue in paypal mode

components/payment/paymentComponent.jsx

@@ -20,6 +20,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     country_code: "",
     postal_code: "",
   });
+  const [shippingInfoCollected, setShippingInfoCollected] = useState(false);
 
   useEffect(() => {
     const fetchExchangeRate = async () => {
@@ -56,7 +57,6 @@ const PaymentComponent = ({ amount, onSuccess }) => {
           throw new Error("Failed to fetch exchange rate");
         }
       } catch (err) {
-        // setError("Currency conversion failed. Please try again later.");
         console.error("Exchange rate error:", err);
       }
     };
@@ -80,22 +80,14 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   const handlePaymentSuccess = (response) => {
     onSuccess?.({
       ...response,
-      shippingData, // Include the shipping data in the success callback
+      address: shippingData, // Include the shipping data in the success callback
     });
   };
 
   const handleRazorpayPayment = async () => {
-    if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
-      setError("Please fill in all required fields.");
-      return;
-    }
-
     try {
       const order = await createOrder();
-      console.log(shippingData)
-      // log env varaible NEXT_RAZORPAY_CLIENT_ID in next js
       
-      console.log("Razorpay Client ID:", process.env.NEXT_PUBLIC_RAZORPAY_CLIENT_ID);
       const options = {
         key: "rzp_test_Xf4wnkvQQeUnCq",
         amount: order.amount,
@@ -109,8 +101,8 @@ const PaymentComponent = ({ amount, onSuccess }) => {
           contact: shippingData.city,
         },
         handler: (response) => {
-          response.address = shippingData
+          response.address = shippingData;
-          handlePaymentSuccess(response); // Pass the response to the success handler
+          handlePaymentSuccess(response);
         },
       };
 
@@ -123,13 +115,23 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   };
 
   const handlePopupSubmit = () => {
+    if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
+      setError("Please fill in all required fields.");
+      return;
+    }
+    
     setShowPopup(false);
-    handleRazorpayPayment();
+    setShippingInfoCollected(true);
+    setError(null);
   };
 
-  // if (!usdAmount) {
+  const validateShippingInfo = () => {
-  //   return <div className="text-center p-4">Loading exchange rates...</div>;
+    if (!shippingInfoCollected) {
-  // }
+      setShowPopup(true);
+      return false;
+    }
+    return true;
+  };
 
   return (
     <div className="max-w-md mx-auto">
@@ -143,6 +145,32 @@ const PaymentComponent = ({ amount, onSuccess }) => {
           Error loading Razorpay: {razorpayError}
         </div>
       )}
+      
+      {/* Show shipping info status */}
+      {shippingInfoCollected && (
+        <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+          Shipping information collected ✓
+          <button 
+            onClick={() => setShowPopup(true)}
+            className="ml-2 text-sm underline"
+          >
+            Edit
+          </button>
+        </div>
+      )}
+
+      {/* Collect shipping info button */}
+      {!shippingInfoCollected && (
+        <button
+          onClick={() => setShowPopup(true)}
+          className="w-full bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 mb-4"
+        >
+          Enter Shipping Information
+        </button>
+      )}
+
+      {/* Payment options - only enabled after shipping info is collected */}
+      <div className={!shippingInfoCollected ? "opacity-50 pointer-events-none" : ""}>
         <PayPalScriptProvider
           options={{
             "client-id": process.env.NEXT_PUBLIC_CLIENT_ID,
@@ -155,7 +183,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               tagline: false,
               fundingicons: true,
             }}
-          disabled={isProcessing}
+            disabled={isProcessing || !shippingInfoCollected}
             className="w-full"
             createOrder={(data, actions) => {
               return actions.order.create({
@@ -176,7 +204,8 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               try {
                 setIsProcessing(true);
                 const order = await actions.order.capture();
-              onSuccess?.(order);
+                order.address = shippingData; // Add shipping data to PayPal order
+                handlePaymentSuccess(order);
               } catch (err) {
                 setError("Payment failed. Please try again.");
                 console.error("Payment error:", err);
@@ -191,12 +220,13 @@ const PaymentComponent = ({ amount, onSuccess }) => {
         </PayPalScriptProvider>
 
         <button
-        onClick={() => setShowPopup(true)}
+          onClick={handleRazorpayPayment}
-        disabled={isProcessing || isLoading}
+          disabled={isProcessing || isLoading || !shippingInfoCollected}
           className="mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
         >
           {isLoading ? "Loading Razorpay..." : "Pay with Razorpay"}
         </button>
+      </div>
 
       {showPopup && (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50" style={{ zIndex: 1000 }}>
@@ -204,7 +234,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
             <h3 className="text-lg font-medium mb-4">Enter Your Shipping Details</h3>
             <input
               type="text"
-              placeholder="Address Line 1"
+              placeholder="Address Line 1 *"
               value={shippingData.address_line_1}
               onChange={(e) => setShippingData({ ...shippingData, address_line_1: e.target.value })}
               className="w-full p-2 mb-4 border border-gray-300 rounded"
@@ -218,7 +248,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
             />
             <input
               type="text"
-              placeholder="City"
+              placeholder="City *"
               value={shippingData.city}
               onChange={(e) => setShippingData({ ...shippingData, city: e.target.value })}
               className="w-full p-2 mb-4 border border-gray-300 rounded"
@@ -232,26 +262,34 @@ const PaymentComponent = ({ amount, onSuccess }) => {
             />
             <input
               type="text"
-              placeholder="Country Code"
+              placeholder="Country Code *"
               value={shippingData.country_code}
               onChange={(e) => setShippingData({ ...shippingData, country_code: e.target.value })}
               className="w-full p-2 mb-4 border border-gray-300 rounded"
             />
             <input
               type="text"
-              placeholder="Postal Code"
+              placeholder="Postal Code *"
               value={shippingData.postal_code}
               onChange={(e) => setShippingData({ ...shippingData, postal_code: e.target.value })}
               className="w-full p-2 mb-4 border border-gray-300 rounded"
             />
+            <div className="flex gap-2">
+              <button
+                onClick={() => setShowPopup(false)}
+                className="w-1/2 bg-gray-300 text-gray-800 py-2 px-4 rounded hover:bg-gray-400"
+              >
+                Cancel
+              </button>
               <button
                 onClick={handlePopupSubmit}
-              className="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
+                className="w-1/2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
               >
-              Submit
+                Save Address
               </button>
             </div>
           </div>
+        </div>
       )}
 
       <p className="mt-4 text-sm text-gray-600 text-center">

components/shopping-cart/shoppingCart.jsx

@@ -112,7 +112,7 @@ const ShoppingCart = () => {
         paymentId: order.id,
         payerEmail: order.payer.email_address,
         cartId: cartItems[0].id,
-        address: shippingAddress, // Include the shipping address
+        address: order.address, 
       };
 
       const apiResponse = await authAxios.post("/orders/payment/", paymentData);