feat: resolve the payment issue

components/payment/paymentComponent.jsx

@@ -11,8 +11,15 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   const [error, setError] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [usdAmount, setUsdAmount] = useState(null);
-  const [userData, setUserData] = useState({ name: "", email: "", contact: "" });
   const [showPopup, setShowPopup] = useState(false);
+  const [shippingData, setShippingData] = useState({
+    address_line_1: "",
+    address_line_2: "",
+    state: "",
+    city: "",
+    country_code: "",
+    postal_code: "",
+  });
 
   useEffect(() => {
     const fetchExchangeRate = async () => {
@@ -71,13 +78,21 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   };
 
   const handlePaymentSuccess = (response) => {
-    onSuccess?.(response);
+    onSuccess?.({
+      ...response,
+      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)
       const options = {
         key: "rzp_test_1SbLmNX2nCKRZA",
         amount: order.amount,
@@ -86,11 +101,12 @@ const PaymentComponent = ({ amount, onSuccess }) => {
         description: "",
         order_id: order.id,
         prefill: {
-          name: userData.name,
-          email: userData.email,
-          contact: userData.contact,
+          name: shippingData.address_line_1,
+          email: shippingData.address_line_2,
+          contact: shippingData.city,
         },
         handler: (response) => {
+          response.address = shippingData
           handlePaymentSuccess(response); // Pass the response to the success handler
         },
       };
@@ -172,7 +188,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
       </PayPalScriptProvider>
 
       <button
-        onClick={handleRazorpayPayment}
+        onClick={() => setShowPopup(true)}
         disabled={isProcessing || isLoading}
         className="mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
       >
@@ -182,30 +198,47 @@ const PaymentComponent = ({ amount, onSuccess }) => {
       {showPopup && (
         <div className=" fixed inset-0 flex items-center justify-center bg-black bg-opacity-50" style={{ zIndex: 1000 }}>
           <div className="bg-white p-6 rounded-lg shadow-lg w-96">
-            <h3 className="text-lg font-medium mb-4">Enter Your Details</h3>
+            <h3 className="text-lg font-medium mb-4">Enter Your Shipping Details</h3>
             <input
               type="text"
-              placeholder="Name"
-              value={userData.name}
-              onChange={(e) => setUserData({ ...userData, name: e.target.value })}
-              className="w-full p-2 mb-4 border border-gray-300 rounded"
-            />
-            <input
-              type="email"
-              placeholder="Email"
-              value={userData.email}
-              onChange={(e) =>
-                setUserData({ ...userData, email: e.target.value })
-              }
+              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"
             />
             <input
               type="text"
-              placeholder="Contact"
-              value={userData.contact}
-              onChange={(e) =>
-                setUserData({ ...userData, contact: e.target.value })
-              }
+              placeholder="Address Line 2"
+              value={shippingData.address_line_2}
+              onChange={(e) => setShippingData({ ...shippingData, address_line_2: e.target.value })}
+              className="w-full p-2 mb-4 border border-gray-300 rounded"
+            />
+            <input
+              type="text"
+              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"
+            />
+            <input
+              type="text"
+              placeholder="State"
+              value={shippingData.state}
+              onChange={(e) => setShippingData({ ...shippingData, state: e.target.value })}
+              className="w-full p-2 mb-4 border border-gray-300 rounded"
+            />
+            <input
+              type="text"
+              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"
+              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"
             />
             <button
@@ -225,4 +258,4 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   );
 };
 
-export default PaymentComponent;
+export default PaymentComponent;