From 985394f20755998082e1268f5a8c9f92e22a4c00 Mon Sep 17 00:00:00 2001
From: Arush <arush.kapoor@juspay.in>
Date: Wed, 17 Apr 2024 12:41:37 +0530
Subject: [PATCH 1/2] fix(threedsmethod): changed Three DS method API call to
 hidden Form Post

---
 src/ThreeDSMethod.res            | 140 +++++++++++++++++--------------
 src/Utilities/PaymentHelpers.res |  63 --------------
 src/Utilities/Utils.res          |  33 +-------
 src/orca-loader/Types.res        |   4 +-
 4 files changed, 82 insertions(+), 158 deletions(-)

diff --git a/src/ThreeDSMethod.res b/src/ThreeDSMethod.res
index de218ada5..ea3411d64 100644
--- a/src/ThreeDSMethod.res
+++ b/src/ThreeDSMethod.res
@@ -3,15 +3,25 @@ open Utils
 let make = () => {
   let logger = OrcaLogger.make()
 
-  let mountToInnerHTML = innerHTML => {
-    let ele = Window.querySelector("#threeDsInvisibleIframe")
-    switch ele->Nullable.toOption {
-    | Some(elem) => elem->Window.innerHTML(innerHTML)
-    | None =>
-      Console.warn(
-        "INTEGRATION ERROR: Div does not seem to exist on which threeDSMethod is to be mounted",
-      )
-    }
+  let (stateMetadata, setStateMetadata) = React.useState(_ => Dict.make()->JSON.Encode.object)
+
+  let handleLoaded = _ev => {
+    stateMetadata->Utils.getDictFromJson->Dict.set("3dsMethodComp", "Y"->JSON.Encode.string)
+    let metadataDict = stateMetadata->JSON.Decode.object->Option.getOr(Dict.make())
+    let iframeId = metadataDict->getString("iframeId", "")
+    LoggerUtils.handleLogging(
+      ~optLogger=Some(logger),
+      ~eventName=THREE_DS_METHOD_RESULT,
+      ~value="Successful Form Submission",
+      ~paymentMethod="CARD",
+      (),
+    )
+    handlePostMessage([
+      ("fullscreen", true->JSON.Encode.bool),
+      ("param", `3dsAuth`->JSON.Encode.string),
+      ("iframeId", iframeId->JSON.Encode.string),
+      ("metadata", stateMetadata),
+    ])
   }
 
   React.useEffect0(() => {
@@ -21,6 +31,7 @@ let make = () => {
       let dict = json->Utils.getDictFromJson
       if dict->Dict.get("fullScreenIframeMounted")->Option.isSome {
         let metadata = dict->getJsonObjectFromDict("metadata")
+        setStateMetadata(_ => metadata)
         let metaDataDict = metadata->JSON.Decode.object->Option.getOr(Dict.make())
         let threeDsDataDict =
           metaDataDict
@@ -42,74 +53,81 @@ let make = () => {
           ->Option.getOr(Dict.make()->JSON.Encode.object)
         let paymentIntentId = metaDataDict->Utils.getString("paymentIntentId", "")
         let publishableKey = metaDataDict->Utils.getString("publishableKey", "")
-        let iframeId = metaDataDict->getString("iframeId", "")
 
         logger.setClientSecret(paymentIntentId)
         logger.setMerchantId(publishableKey)
 
-        open Promise
-        PaymentHelpers.threeDsMethod(threeDsUrl, threeDsMethodData, ~optLogger=Some(logger))
-        ->then(res => {
-          if res == "" {
-            Exn.raiseError("Empty response from threeDsMethod")->reject
-          } else {
-            LoggerUtils.handleLogging(
-              ~optLogger=Some(logger),
-              ~eventName=THREE_DS_METHOD_RESULT,
-              ~value="Y",
-              ~paymentMethod="CARD",
-              (),
-            )
-            mountToInnerHTML(res)
-            metadata->Utils.getDictFromJson->Dict.set("3dsMethodComp", "Y"->JSON.Encode.string)
-            handlePostMessage([
-              ("fullscreen", true->JSON.Encode.bool),
-              ("param", `3dsAuth`->JSON.Encode.string),
-              ("iframeId", iframeId->JSON.Encode.string),
-              ("metadata", metadata),
-            ])
-            resolve(res)
-          }
-        })
-        ->catch(err => {
-          let exceptionMessage = err->Utils.formatException
+        let iframeId = metaDataDict->getString("iframeId", "")
+
+        let handleFailureScenarios = (eventName, value, internalMetadata, logType) => {
+          LoggerUtils.handleLogging(
+            ~optLogger=Some(logger),
+            ~eventName,
+            ~value,
+            ~internalMetadata,
+            ~paymentMethod="CARD",
+            ~logType,
+            (),
+          )
           metadata->Utils.getDictFromJson->Dict.set("3dsMethodComp", "N"->JSON.Encode.string)
           handlePostMessage([
             ("fullscreen", true->JSON.Encode.bool),
             ("param", `3dsAuth`->JSON.Encode.string),
             ("iframeId", iframeId->JSON.Encode.string),
-            ("metadata", metadata),
+            ("metadata", stateMetadata),
           ])
-          LoggerUtils.handleLogging(
-            ~optLogger=Some(logger),
-            ~eventName=THREE_DS_METHOD_RESULT,
-            ~value=exceptionMessage->JSON.stringify,
-            ~paymentMethod="CARD",
-            ~logType=ERROR,
-            (),
-          )
-          reject(err)
-        })
-        ->ignore
+        }
 
-        let headersDict =
-          metaDataDict
-          ->getJsonObjectFromDict("headers")
-          ->JSON.Decode.object
-          ->Option.getOr(Dict.make())
-        let headers = Dict.make()
+        let ele = Window.querySelector("#threeDsInvisibleDiv")
+
+        switch ele->Nullable.toOption {
+        | Some(elem) => {
+            let form = elem->makeForm(threeDsUrl, "threeDsHiddenPostMethod")
+            let input = Types.createElement("input")
+            input.name = encodeURIComponent("threeDSMethodData")
+            let threeDsMethodStr = threeDsMethodData->JSON.Decode.string->Option.getOr("")
+            input.value = encodeURIComponent(threeDsMethodStr)
+            form.target = "threeDsInvisibleIframe"
+            form.appendChild(input)
 
-        headersDict
-        ->Dict.toArray
-        ->Array.forEach(entries => {
-          let (x, val) = entries
-          Dict.set(headers, x, val->JSON.Decode.string->Option.getOr(""))
-        })
+            LoggerUtils.handleLogging(
+              ~optLogger=Some(logger),
+              ~eventName=THREE_DS_METHOD,
+              ~value="Submitting Form",
+              ~paymentMethod="CARD",
+              (),
+            )
+
+            try {
+              form.submit()
+            } catch {
+            | err => {
+                let exceptionMessage = err->Utils.formatException->JSON.stringify
+                handleFailureScenarios(
+                  THREE_DS_METHOD_RESULT,
+                  "Form Submission Failed",
+                  exceptionMessage,
+                  ERROR,
+                )
+              }
+            }
+          }
+        | None =>
+          handleFailureScenarios(THREE_DS_METHOD, "Unable to Locate threeDsInvisibleDiv", "", INFO)
+        }
       }
     }
     Window.addEventListener("message", handle)
     Some(() => {Window.removeEventListener("message", handle)})
   })
 
-  <div id="threeDsInvisibleIframe" className="bg-black-100 h-96" />
+  <>
+    <div id="threeDsInvisibleDiv" className="hidden" />
+    <iframe
+      id="threeDsInvisibleIframe"
+      name="threeDsInvisibleIframe"
+      className="h-96 invisible"
+      onLoad=handleLoaded
+    />
+  </>
 }
diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
index 83937b42d..ad8881ca5 100644
--- a/src/Utilities/PaymentHelpers.res
+++ b/src/Utilities/PaymentHelpers.res
@@ -79,69 +79,6 @@ let retrievePaymentIntent = (
   })
 }
 
-let threeDsMethod = (url, threeDsMethodData, ~optLogger) => {
-  open Promise
-  logApi(
-    ~optLogger,
-    ~url,
-    ~apiLogType=Request,
-    ~eventName=THREE_DS_METHOD_CALL_INIT,
-    ~logType=INFO,
-    ~logCategory=API,
-    (),
-  )
-  let threeDsMethodStr = threeDsMethodData->JSON.Decode.string->Option.getOr("")
-  let body = `${encodeURIComponent("threeDSMethodData")}=${encodeURIComponent(threeDsMethodStr)}`
-
-  fetchApiWithNoCors(url, ~method=#POST, ~bodyStr=body, ())
-  ->then(res => {
-    let statusCode = res->Fetch.Response.status->Int.toString
-    if statusCode->String.charAt(0) !== "2" {
-      res
-      ->Fetch.Response.text
-      ->then(text => {
-        logApi(
-          ~optLogger,
-          ~url,
-          ~data=text->JSON.Encode.string,
-          ~statusCode,
-          ~apiLogType=Err,
-          ~eventName=THREE_DS_METHOD_CALL,
-          ~logType=ERROR,
-          ~logCategory=API,
-          (),
-        )
-        ""->resolve
-      })
-    } else {
-      logApi(
-        ~optLogger,
-        ~url,
-        ~statusCode,
-        ~apiLogType=Response,
-        ~eventName=THREE_DS_METHOD_CALL,
-        (),
-      )
-      res->Fetch.Response.text
-    }
-  })
-  ->catch(err => {
-    let exceptionMessage = err->formatException
-    Console.log2("Unable to call 3ds method ", exceptionMessage)
-    logApi(
-      ~optLogger,
-      ~url,
-      ~eventName=THREE_DS_METHOD_CALL,
-      ~apiLogType=NoResponse,
-      ~data=exceptionMessage,
-      ~logType=ERROR,
-      ~logCategory=API,
-      (),
-    )
-    reject(err)
-  })
-}
-
 let threeDsAuth = (~clientSecret, ~optLogger, ~threeDsMethodComp, ~headers) => {
   let endpoint = ApiEndpoint.getApiEndPoint()
   let paymentIntentID = String.split(clientSecret, "_secret_")[0]->Option.getOr("")
diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
index af84cfe38..208a74617 100644
--- a/src/Utilities/Utils.res
+++ b/src/Utilities/Utils.res
@@ -835,37 +835,6 @@ let fetchApi = (uri, ~bodyStr: string="", ~headers=Dict.make(), ~method: Fetch.m
   })
 }
 
-let fetchApiWithNoCors = (
-  uri,
-  ~bodyStr: string="",
-  ~headers=Dict.make(),
-  ~method: Fetch.method,
-  (),
-) => {
-  open Promise
-  let body = switch method {
-  | #GET => resolve(None)
-  | _ => resolve(Some(Fetch.Body.string(bodyStr)))
-  }
-  body->then(body => {
-    Fetch.fetch(
-      uri,
-      {
-        method,
-        mode: #"no-cors",
-        ?body,
-        headers: getHeaders(~headers, ~uri, ()),
-      },
-    )
-    ->catch(err => {
-      reject(err)
-    })
-    ->then(resp => {
-      resolve(resp)
-    })
-  })
-}
-
 let arrayJsonToCamelCase = arr => {
   arr->Array.map(item => {
     item->transformKeys(CamelCase)
@@ -1192,7 +1161,7 @@ let makeForm = (element, url, id) => {
   form.action = url
   form.method = "POST"
   form.enctype = "application/x-www-form-urlencoded;charset=UTF-8"
-  form.style = "display: hidden; "
+  form.style = "display: hidden;"
   element->appendChild(form)
   form
 }
diff --git a/src/orca-loader/Types.res b/src/orca-loader/Types.res
index 7800863c2..af364c201 100644
--- a/src/orca-loader/Types.res
+++ b/src/orca-loader/Types.res
@@ -177,8 +177,8 @@ type rec ele = {
   mutable target: string,
   mutable enctype: string,
   mutable value: string,
-  submit: (. unit) => unit,
-  appendChild: (. ele) => unit,
+  submit: unit => unit,
+  appendChild: ele => unit,
 }
 @scope("document") @val external createElement: string => ele = "createElement"
 

From 4a3f2befc55090139282bd048d23d25b4652e52e Mon Sep 17 00:00:00 2001
From: Vrishab Srivatsa <vrishab.srivatsa@juspay.in>
Date: Wed, 17 Apr 2024 19:41:33 +0530
Subject: [PATCH 2/2] fix: threeDsMethod logs change

---
 src/Payments/CardPayment.res        |  2 --
 src/ThreeDSMethod.res               | 28 ++++++----------------------
 src/orca-log-catcher/OrcaLogger.res |  8 ++------
 3 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index bc22d7d85..b1e6b7f66 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -190,8 +190,6 @@ let make = (
 
   let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5"
 
-  Js.log2("sdvjnsddsjd", (list.mandate_payment, options.terms.card))
-
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
       <div
diff --git a/src/ThreeDSMethod.res b/src/ThreeDSMethod.res
index ea3411d64..e024fd7a9 100644
--- a/src/ThreeDSMethod.res
+++ b/src/ThreeDSMethod.res
@@ -12,7 +12,7 @@ let make = () => {
     LoggerUtils.handleLogging(
       ~optLogger=Some(logger),
       ~eventName=THREE_DS_METHOD_RESULT,
-      ~value="Successful Form Submission",
+      ~value="Y",
       ~paymentMethod="CARD",
       (),
     )
@@ -59,14 +59,13 @@ let make = () => {
 
         let iframeId = metaDataDict->getString("iframeId", "")
 
-        let handleFailureScenarios = (eventName, value, internalMetadata, logType) => {
+        let handleFailureScenarios = value => {
           LoggerUtils.handleLogging(
             ~optLogger=Some(logger),
-            ~eventName,
+            ~eventName=THREE_DS_METHOD_RESULT,
             ~value,
-            ~internalMetadata,
             ~paymentMethod="CARD",
-            ~logType,
+            ~logType=ERROR,
             (),
           )
           metadata->Utils.getDictFromJson->Dict.set("3dsMethodComp", "N"->JSON.Encode.string)
@@ -89,31 +88,16 @@ let make = () => {
             input.value = encodeURIComponent(threeDsMethodStr)
             form.target = "threeDsInvisibleIframe"
             form.appendChild(input)
-
-            LoggerUtils.handleLogging(
-              ~optLogger=Some(logger),
-              ~eventName=THREE_DS_METHOD,
-              ~value="Submitting Form",
-              ~paymentMethod="CARD",
-              (),
-            )
-
             try {
               form.submit()
             } catch {
             | err => {
                 let exceptionMessage = err->Utils.formatException->JSON.stringify
-                handleFailureScenarios(
-                  THREE_DS_METHOD_RESULT,
-                  "Form Submission Failed",
-                  exceptionMessage,
-                  ERROR,
-                )
+                handleFailureScenarios(exceptionMessage)
               }
             }
           }
-        | None =>
-          handleFailureScenarios(THREE_DS_METHOD, "Unable to Locate threeDsInvisibleDiv", "", INFO)
+        | None => handleFailureScenarios("Unable to Locate threeDsInvisibleDiv")
         }
       }
     }
diff --git a/src/orca-log-catcher/OrcaLogger.res b/src/orca-log-catcher/OrcaLogger.res
index 6517c1b09..c42ca30c2 100644
--- a/src/orca-log-catcher/OrcaLogger.res
+++ b/src/orca-log-catcher/OrcaLogger.res
@@ -14,8 +14,6 @@ type eventName =
   | RETRIEVE_CALL
   | AUTHENTICATION_CALL_INIT
   | AUTHENTICATION_CALL
-  | THREE_DS_METHOD_CALL_INIT
-  | THREE_DS_METHOD_CALL
   | CONFIRM_CALL_INIT
   | CONFIRM_CALL
   | SESSIONS_CALL_INIT
@@ -79,8 +77,6 @@ let eventNameToStrMapper = eventName => {
   | RETRIEVE_CALL => "RETRIEVE_CALL"
   | AUTHENTICATION_CALL_INIT => "AUTHENTICATION_CALL_INIT"
   | AUTHENTICATION_CALL => "AUTHENTICATION_CALL"
-  | THREE_DS_METHOD_CALL_INIT => "THREE_DS_METHOD_CALL_INIT"
-  | THREE_DS_METHOD_CALL => "THREE_DS_METHOD_CALL"
   | CONFIRM_CALL_INIT => "CONFIRM_CALL_INIT"
   | CONFIRM_CALL => "CONFIRM_CALL"
   | SESSIONS_CALL_INIT => "SESSIONS_CALL_INIT"
@@ -499,7 +495,7 @@ let make = (
       PAYMENT_ATTEMPT,
       CONFIRM_CALL,
       AUTHENTICATION_CALL,
-      THREE_DS_METHOD_CALL,
+      THREE_DS_METHOD_RESULT,
       SDK_CRASH,
       REDIRECTING_USER,
       DISPLAY_BANK_TRANSFER_INFO_PAGE,
@@ -508,6 +504,7 @@ let make = (
       LOADER_CHANGED,
       SESSIONS_CALL,
       RETRIEVE_CALL,
+      DISPLAY_THREE_DS_SDK,
     ]
     arrayOfLogs
     ->Array.find(log => {
@@ -542,7 +539,6 @@ let make = (
         }
       }
     | AUTHENTICATION_CALL
-    | THREE_DS_METHOD_CALL
     | RETRIEVE_CALL
     | CONFIRM_CALL
     | SESSIONS_CALL