From 19490b86f1d7ed41c3ecc6fb83895729c4426385 Mon Sep 17 00:00:00 2001
From: Umesh Ravani <umeshravani98@gmail.com>
Date: Tue, 28 Apr 2026 12:30:13 +0530
Subject: [PATCH] Add Razorpay payment gateway integration

---
 src/components/checkout/PaymentSection.tsx | 34 ++++++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/checkout/PaymentSection.tsx b/src/components/checkout/PaymentSection.tsx
index 19537e5f..49529172 100644
--- a/src/components/checkout/PaymentSection.tsx
+++ b/src/components/checkout/PaymentSection.tsx
@@ -29,11 +29,16 @@ import {
   PayPalPaymentForm,
   type PayPalPaymentFormHandle,
 } from "@/components/checkout/PayPalPaymentForm";
+import {
+  RazorpayPaymentForm,
+  type RazorpayPaymentFormHandle,
+} from "@/components/checkout/RazorpayPaymentForm";
 import {
   confirmWithSavedCard,
   StripePaymentForm,
   type StripePaymentFormHandle,
 } from "@/components/checkout/StripePaymentForm";
+
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { useCountryStates } from "@/hooks/useCountryStates";
@@ -158,12 +163,15 @@ export function PaymentSection({
   const [paymentSessionId, setPaymentSessionId] = useState<string | null>(null);
   const [gatewayError, setGatewayError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+
   const gatewayHandleRef = useRef<
     | StripePaymentFormHandle
     | AdyenPaymentFormHandle
     | PayPalPaymentFormHandle
+    | RazorpayPaymentFormHandle
     | null
   >(null);
+
   const initRef = useRef(false);
   const sessionRequestIdRef = useRef(0);
   const completionInFlightRef = useRef(false);
@@ -173,7 +181,8 @@ export function PaymentSection({
       handle:
         | StripePaymentFormHandle
         | AdyenPaymentFormHandle
-        | PayPalPaymentFormHandle,
+        | PayPalPaymentFormHandle
+        | RazorpayPaymentFormHandle,
     ) => {
       gatewayHandleRef.current = handle;
     },
@@ -517,8 +526,14 @@ export function PaymentSection({
                 | undefined;
               const gatewayId = resolveGatewayId(selectedMethod.type);
               const isStripe = gatewayId === "stripe";
+
+              // --- ADDED RAZORPAY TO APPROVAL FLAG ---
               const isApprovalDriven =
-                gatewayId === "adyen" || gatewayId === "paypal";
+                gatewayId === "adyen" ||
+                gatewayId === "paypal" ||
+                gatewayId === "razorpay";
+              // ---------------------------------------
+
               const canUseSavedCard =
                 isStripe && Boolean(selectedCardId && clientSecret);
 
@@ -548,7 +563,7 @@ export function PaymentSection({
                 return { error };
               }
 
-              // Approval-driven gateways (Adyen, PayPal) complete the order
+              // Approval-driven gateways (Adyen, PayPal, Razorpay) complete the order
               // via handleGatewayApproved when their callback fires — don't
               // call onPaymentComplete here or we'll race with the callback.
               if (isApprovalDriven) {
@@ -895,6 +910,19 @@ export function PaymentSection({
                                 </div>
                               ) : null;
                             }
+                            case "razorpay": {
+                              return ext ? (
+                                <div className="p-4">
+                                  <RazorpayPaymentForm
+                                    key={ext._external_id as string}
+                                    sessionData={ext}
+                                    cart={cart}
+                                    onReady={handleGatewayReady}
+                                    onApproved={handleGatewayApproved}
+                                  />
+                                </div>
+                              ) : null;
+                            }
                             default:
                               return (
                                 <div className="px-4 py-6 text-center">