feat: add razorpay

app/api/razorpay/order/route.js

@@ -0,0 +1,23 @@
+import Razorpay from "razorpay";
+
+const razorpay = new Razorpay({
+  key_id: "rzp_test_1SbLmNX2nCKRZA",
+  key_secret: "8CTcXrodJqKQ3cfmic84Ffdl",
+});
+
+export async function POST(req) {
+  try {
+    const body = await req.json(); // Parse the request body
+    const { amount, currency } = body;
+
+    const order = await razorpay.orders.create({
+      amount,
+      currency,
+    });
+
+    return new Response(JSON.stringify(order), { status: 200 });
+  } catch (error) {
+    console.error("Error creating Razorpay order:", error);
+    return new Response(JSON.stringify({ error: "Failed to create Razorpay order" }), { status: 500 });
+  }
+}

app/api/razorpay/verify/route.js

@@ -0,0 +1,23 @@
+const crypto = require("crypto");
+
+export default async function handler(req, res) {
+  if (req.method === "POST") {
+    const { razorpay_order_id, razorpay_payment_id, razorpay_signature } =
+      req.body;
+
+    const body = razorpay_order_id + "|" + razorpay_payment_id;
+
+    const expectedSignature = crypto
+      .createHmac("sha256", "8CTcXrodJqKQ3cfmic84Ffdl")
+      .update(body.toString())
+      .digest("hex");
+
+    if (expectedSignature === razorpay_signature) {
+      res.status(200).json({ success: true });
+    } else {
+      res.status(400).json({ success: false });
+    }
+  } else {
+    res.status(405).json({ error: "Method not allowed" });
+  }
+}

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 response = await axios.post("/api/razorpay/order", {
-      const order = await actions.order.capture();
+        amount: amount * 100, // Amount in paise
-      onSuccess?.(order);
+        currency: "INR",
-    } catch (err) {
+      });
-      setError("Payment failed. Please try again.");
+      return response.data;
-      console.error("Payment error:", err);
+    } catch (error) {
-    } finally {
+      console.error("Error creating order:", error);
-      setIsProcessing(false);
+      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,
@@ -89,7 +135,6 @@ const PaymentComponent = ({ amount, onSuccess }) => {
             label: "checkout",
             tagline: false,
             fundingicons: true,
-
           }}
           disabled={isProcessing}
           className="w-full"
@@ -108,29 +153,74 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               },
             });
           }}
-          onShippingChange={(data, actions) => {
+          onApprove={async (data, actions) => {
-            const allowedCountries = ["IN", "MY", "NP"];
+            try {
-            const shippingCountry = data.shipping_address.country_code;
+              setIsProcessing(true);
-
+              const order = await actions.order.capture();
-            if (!allowedCountries.includes(shippingCountry)) {
+              onSuccess?.(order);
-              return actions.reject().then(() => {
+            } catch (err) {
-                setError(
+              setError("Payment failed. Please try again.");
-                  "Shipping is only available for India, Malaysia, and Nepal. Please update your address."
+              console.error("Payment error:", err);
-                );
+            } finally {
-              });
+              setIsProcessing(false);
             }
-            return actions.resolve();
           }}
-          onApprove={handleApprove}
           onError={(err) => {
             setError("Payment failed. Please try again.");
           }}
         />
+      </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>
-      </PayPalScriptProvider>
     </div>
   );
 };

components/shopping-cart/shoppingCart.jsx

@@ -80,19 +80,29 @@ const ShoppingCart = () => {
     return <EmptyCart />;
   }
 
-  const handlePaymentSuccess = async (order) => {
+  const handlePaymentSuccess = async (response) => {
-    console.log("Payment SuccessFul", order);
+    console.log("Payment Successful", response);
-    const response = await authAxios.post("/orders/payment/", {
+
-      orderId: order.id,
+    const { razorpay_payment_id, razorpay_order_id, razorpay_signature } = response;
-      payer_mail: order.payer.email_address,
+
-      address: order.purchase_units[0].shipping.address,
+    try {
-      name: order.purchase_units[0].shipping.name.full_name,
+      const paymentData = {
+        paymentId: razorpay_payment_id,
+        orderId: razorpay_order_id,
+        signature: razorpay_signature,
         cartId: cartItems[0].id,
-    });
-    router.push('/accounts/profile/orders')
-    toast.success('You Order Is Successfull!')
-    console.log(response);
       };
+
+      const apiResponse = await authAxios.post("/orders/payment/", paymentData);
+      router.push("/accounts/profile/orders");
+      toast.success("Your Order Is Successful!");
+      console.log(apiResponse);
+    } catch (error) {
+      console.error("Error processing payment:", error);
+      toast.error("Payment processing failed. Please try again.");
+    }
+  };
+
   return (
     <div className="w-full bg-white">
       <div className="w-full px-4 md:px-8 max-w-[1600px] mx-auto font-['Inter']">

package-lock.json

@@ -25,10 +25,12 @@
         "framer-motion": "^12.0.6",
         "lucide-react": "^0.445.0",
         "next": "14.2.13",
+        "razorpay": "^2.9.6",
         "react": "^18",
         "react-dom": "^18",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
+        "react-razorpay": "^3.0.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -5585,6 +5587,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/razorpay": {
+      "version": "2.9.6",
+      "resolved": "https://registry.npmjs.org/razorpay/-/razorpay-2.9.6.tgz",
+      "integrity": "sha512-zsHAQzd6e1Cc6BNoCNZQaf65ElL6O6yw0wulxmoG5VQDr363fZC90Mp1V5EktVzG45yPyNomNXWlf4cQ3622gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.6.8"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -5641,6 +5652,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-razorpay": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-razorpay/-/react-razorpay-3.0.1.tgz",
+      "integrity": "sha512-43P6VB20quinlUDN3dUdg0XlMtoClzfvhgpPWnGrLwLE6Pr570fXdA4kC+92Wqof48A/x96TXRpLnrQ/J1eXyw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",

package.json

@@ -27,10 +27,12 @@
     "framer-motion": "^12.0.6",
     "lucide-react": "^0.445.0",
     "next": "14.2.13",
+    "razorpay": "^2.9.6",
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "react-razorpay": "^3.0.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },