refactor: make shooping cart responsive and resolve api converter currency issue

components/payment/paymentComponent.jsx

@@ -35,7 +35,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
 
         const response = await axios.get("https://apilayer.net/api/live", {
           params: {
-            access_key: "9bcb30907dee1cda9866f7b49f0f8def",
+            access_key: "ytguhijok",
             currencies: "USD",
             source: "INR",
             format: 1,
@@ -56,7 +56,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
           throw new Error("Failed to fetch exchange rate");
         }
       } catch (err) {
-        setError("Currency conversion failed. Please try again later.");
+        // setError("Currency conversion failed. Please try again later.");
         console.error("Exchange rate error:", err);
       }
     };
@@ -93,6 +93,9 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     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_1SbLmNX2nCKRZA",
         amount: order.amount,
@@ -124,9 +127,9 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     handleRazorpayPayment();
   };
 
-  if (!usdAmount) {
-    return <div className="text-center p-4">Loading exchange rates...</div>;
-  }
+  // if (!usdAmount) {
+  //   return <div className="text-center p-4">Loading exchange rates...</div>;
+  // }
 
   return (
     <div className="max-w-md mx-auto">