feat: add razorpay

components/payment/paymentComponent.jsx

@@ -1,15 +1,18 @@
 import React, { useState, useEffect } from "react";
 import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
 import axios from "axios";
-import authAxios from "@/utils/axios";
+import { useRazorpay } from "react-razorpay";
 
 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 [userData, setUserData] = useState({ name: "", email: "", contact: "" });
+  const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
     const fetchExchangeRate = async () => {
@@ -25,7 +28,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
 
         const response = await axios.get("https://apilayer.net/api/live", {
           params: {
-            access_key: "9bcb30907dee1cda9866f7b49f0f8def",
+            access_key: "",
             currencies: "USD",
             source: "INR",
             format: 1,
@@ -54,19 +57,57 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     fetchExchangeRate();
   }, [amount]);
 
-  const handleApprove = async (data, actions) => {
+  const createOrder = async () => {
     try {
-      setIsProcessing(true);
-      const order = await actions.order.capture();
-      onSuccess?.(order);
-    } catch (err) {
-      setError("Payment failed. Please try again.");
-      console.error("Payment error:", err);
-    } finally {
-      setIsProcessing(false);
+      const response = await axios.post("/api/razorpay/order", {
+        amount: amount * 100, // Amount in paise
+        currency: "INR",
+      });
+      return response.data;
+    } catch (error) {
+      console.error("Error creating order:", error);
+      throw error;
     }
   };
 
+  const handlePaymentSuccess = (response) => {
+    onSuccess?.(response);
+  };
+
+  const handleRazorpayPayment = async () => {
+    try {
+      const order = await createOrder();
+
+      const options = {
+        key: "rzp_test_1SbLmNX2nCKRZA",
+        amount: order.amount,
+        currency: order.currency,
+        name: "Rudraksha",
+        description: "",
+        order_id: order.id,
+        prefill: {
+          name: userData.name,
+          email: userData.email,
+          contact: userData.contact,
+        },
+        handler: (response) => {
+          handlePaymentSuccess(response); // Pass the response to the success handler
+        },
+      };
+
+      const razorpayInstance = new Razorpay(options);
+      razorpayInstance.open();
+    } catch (error) {
+      setError("Payment failed. Please try again.");
+      console.error("Razorpay error:", error);
+    }
+  };
+
+  const handlePopupSubmit = () => {
+    setShowPopup(false);
+    handleRazorpayPayment();
+  };
+
   if (!usdAmount) {
     return <div className="text-center p-4">Loading exchange rates...</div>;
   }
@@ -78,6 +119,11 @@ const PaymentComponent = ({ amount, onSuccess }) => {
           {error}
         </div>
       )}
+      {razorpayError && (
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+          Error loading Razorpay: {razorpayError}
+        </div>
+      )}
       <PayPalScriptProvider
         options={{
           "client-id": process.env.NEXT_PUBLIC_CLIENT_ID,
@@ -86,10 +132,9 @@ const PaymentComponent = ({ amount, onSuccess }) => {
         <PayPalButtons
           style={{
             layout: "horizontal",
-            label: "checkout", 
+            label: "checkout",
             tagline: false,
             fundingicons: true,
-
           }}
           disabled={isProcessing}
           className="w-full"
@@ -108,29 +153,74 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               },
             });
           }}
-          onShippingChange={(data, actions) => {
-            const allowedCountries = ["IN", "MY", "NP"];
-            const shippingCountry = data.shipping_address.country_code;
-
-            if (!allowedCountries.includes(shippingCountry)) {
-              return actions.reject().then(() => {
-                setError(
-                  "Shipping is only available for India, Malaysia, and Nepal. Please update your address."
-                );
-              });
+          onApprove={async (data, actions) => {
+            try {
+              setIsProcessing(true);
+              const order = await actions.order.capture();
+              onSuccess?.(order);
+            } catch (err) {
+              setError("Payment failed. Please try again.");
+              console.error("Payment error:", err);
+            } finally {
+              setIsProcessing(false);
             }
-            return actions.resolve();
           }}
-          onApprove={handleApprove}
           onError={(err) => {
             setError("Payment failed. Please try again.");
           }}
         />
-
-        <p className="mt-4 text-sm text-gray-600 text-center">
-          Note: We only ship to addresses in India, Malaysia, and Nepal.
-        </p>
       </PayPalScriptProvider>
+
+      <button
+        onClick={handleRazorpayPayment}
+        disabled={isProcessing || isLoading}
+        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>
+
+      {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>
+            <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 })
+              }
+              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 })
+              }
+              className="w-full p-2 mb-4 border border-gray-300 rounded"
+            />
+            <button
+              onClick={handlePopupSubmit}
+              className="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      )}
+
+      <p className="mt-4 text-sm text-gray-600 text-center">
+        Note: We only ship to addresses in India, Malaysia, and Nepal.
+      </p>
     </div>
   );
 };