From 26cde8f7c530f823cb704c86b2c90f5fd046c1b0 Mon Sep 17 00:00:00 2001
From: Govind <97059996+SGFGOV@users.noreply.github.com>
Date: Mon, 13 Nov 2023 13:05:41 +0530
Subject: [PATCH] Update index.tsx

Sometimes if payment session provider types aren't supported by the server, the component crashes. A minor fix to check that
---
 .../components/payment-container/index.tsx    | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/modules/checkout/components/payment-container/index.tsx b/src/modules/checkout/components/payment-container/index.tsx
index 25ff46de5..a428b1d6b 100644
--- a/src/modules/checkout/components/payment-container/index.tsx
+++ b/src/modules/checkout/components/payment-container/index.tsx
@@ -52,19 +52,28 @@ const PaymentContainer: React.FC<PaymentContainerProps> = ({
         disabled={disabled}
       >
         <Radio checked={selected} />
-        <div className="flex flex-col text-left">
-          <h3 className="text-base-semi leading-none text-gray-900">
-            {PaymentInfoMap[paymentSession.provider_id].title}
-          </h3>
-          <span className="text-gray-700 text-small-regular mt-2">
-            {PaymentInfoMap[paymentSession.provider_id].description}
-          </span>
-          {selected && (
-            <div className="w-full mt-4">
-              <PaymentElement paymentSession={paymentSession} />
-            </div>
-          )}
-        </div>
+        {PaymentInfoMap[paymentSession.provider_id] ? (
+                    <div className="flex flex-col text-left">
+                        <h3 className="text-base-semi leading-none text-gray-900">
+                            {PaymentInfoMap[paymentSession.provider_id].title}
+                        </h3>
+                        <span className="text-gray-700 text-small-regular mt-2">
+                            {
+                                PaymentInfoMap[paymentSession.provider_id]
+                                    .description
+                            }
+                        </span>
+                        {selected && (
+                            <div className="w-full mt-4">
+                                <PaymentElement
+                                    paymentSession={paymentSession}
+                                />
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <></>
+                )}
       </button>
     </div>
   )