refactor: payment issue fix

components/payment/paymentComponent.jsx

@@ -2,15 +2,12 @@ import React, { useState, useEffect } from "react";
 import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
 import axios from "axios";
 import { useRazorpay } from "react-razorpay";
-
+import { useCurrency } from "@/app/contexts/currencyContext";
-const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
-const EXCHANGE_RATE_KEY = "exchange_rate_cache";
 
 const PaymentComponent = ({ amount, onSuccess }) => {
   const { error: razorpayError, isLoading, Razorpay } = useRazorpay();
   const [error, setError] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
-  const [usdAmount, setUsdAmount] = useState(null);
   const [showPopup, setShowPopup] = useState(false);
   const [shippingData, setShippingData] = useState({
     address_line_1: "",
@@ -23,47 +20,43 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   });
   const [shippingInfoCollected, setShippingInfoCollected] = useState(false);
   
+  const { selectedCurrency, convertPrice, exchangeRates } = useCurrency();
+  const amountInSelectedCurrency = convertPrice(amount);
+  const [usdAmount, setUsdAmount] = useState(null);
+  
   useEffect(() => {
-    const fetchExchangeRate = async () => {
+    const calculateUsdAmount = async () => {
       try {
-        const cachedData = localStorage.getItem(EXCHANGE_RATE_KEY);
+        if (selectedCurrency === 'USD') {
-        if (cachedData) {
+          setUsdAmount(amountInSelectedCurrency);
-          const { rate, timestamp } = JSON.parse(cachedData);
-          if (Date.now() - timestamp < CACHE_DURATION) {
-            setUsdAmount((amount * rate).toFixed(2));
           return;
         }
+        
+        if (exchangeRates && exchangeRates['USD']) {
+          const usdRate = exchangeRates['USD'];
+          setUsdAmount((amountInSelectedCurrency / usdRate).toFixed(2));
+          return;
         }
         
-        const response = await axios.get("https://apilayer.net/api/live", {
+        const response = await axios.get('https://api.exchangerate-api.com/v4/latest/' + selectedCurrency);
-          params: {
+        if (response.data && response.data.rates && response.data.rates.USD) {
-            access_key: "9bcb30907dee1cda9866f7b49f0f8def",
+          const usdRate = response.data.rates.USD;
-            currencies: "USD",
+          setUsdAmount((amountInSelectedCurrency * usdRate).toFixed(2));
-            source: "INR",
-            format: 1,
-          },
-        });
-
-        if (response.data.success) {
-          const rate = response.data.quotes.INRUSD;
-          localStorage.setItem(
-            EXCHANGE_RATE_KEY,
-            JSON.stringify({
-              rate,
-              timestamp: Date.now(),
-            })
-          );
-          setUsdAmount((amount * rate).toFixed(2));
         } else {
-          throw new Error("Failed to fetch exchange rate");
+          throw new Error("Failed to fetch USD exchange rate");
         }
       } catch (err) {
-        console.error("Exchange rate error:", err);
+        console.error("Error calculating USD amount:", err);
+        if (selectedCurrency === 'INR') {
+          setUsdAmount((amountInSelectedCurrency / 75).toFixed(2));
+        } else {
+          setUsdAmount(amountInSelectedCurrency);
+        }
       }
     };
 
-    fetchExchangeRate();
+    calculateUsdAmount();
-  }, [amount]);
+  }, [amountInSelectedCurrency, selectedCurrency, exchangeRates]);
 
   const createOrder = async () => {
     try {
@@ -133,14 +126,6 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     setError(null);
   };
 
-  const validateShippingInfo = () => {
-    if (!shippingInfoCollected) {
-      setShowPopup(true);
-      return false;
-    }
-    return true;
-  };
-
   return (
     <div className="max-w-md mx-auto">
       {error && (
@@ -180,8 +165,10 @@ const PaymentComponent = ({ amount, onSuccess }) => {
         <PayPalScriptProvider
           options={{
             "client-id": process.env.NEXT_PUBLIC_CLIENT_ID,
+            currency: "USD", // PayPal requires USD or other supported currencies
           }}
         >
+          {usdAmount && (
             <PayPalButtons
               style={{
                 layout: "horizontal",
@@ -221,8 +208,10 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               }}
               onError={(err) => {
                 setError("Payment failed. Please try again.");
+                console.error("PayPal error:", err);
               }}
             />
+          )}
         </PayPalScriptProvider>
 
         <button

components/shopping-cart/shoppingCart.jsx

@@ -123,6 +123,7 @@ const ShoppingCart = () => {
       const paymentData = {
         paymentId: order.id,
         payerEmail: order.payer.email_address,
+        orderId: order.id,
         cartId: cartItems[0].id,
         address: order.address, 
       };