feat: 3DS netcetra Part B (#383)

Co-authored-by: Pritish Budhiraja <pritish.budhiraja@gmail.com>
juspay · May 27, 2024 · aa44b98 · aa44b98
1 parent 66b13f5
commit aa44b98
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 41 deletions.
diff --git a/src/Components/Modal.res b/src/Components/Modal.res
@@ -18,13 +18,12 @@ let make = (
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let closeModal = () => {
     setOpenModal(_ => false)
-    setTimeout(() => {
-      switch closeCallback {
-      | Some(fn) => fn()
-      | None => ()
-      }
-      Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
-    }, 450)->ignore
+    switch closeCallback {
+    | Some(fn) => fn()
+    | None => setTimeout(() => {
+        Utils.handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+      }, 450)->ignore
+    }
   }
 
   React.useEffect(() => {

diff --git a/src/ThreeDSAuth.res b/src/ThreeDSAuth.res
@@ -5,8 +5,22 @@ let make = () => {
   let (openModal, setOpenModal) = React.useState(_ => false)
   let (loader, setloader) = React.useState(_ => true)
 
+  let threeDsAuthoriseUrl = React.useRef("")
+  let (expiryTime, setExpiryTime) = React.useState(_ => 600000.0)
+
   let logger = OrcaLogger.make(~source=Elements(Payment), ())
 
+  let handleFrictionLess = () => {
+    let ele = Window.querySelector("#threeDsAuthDiv")
+    switch ele->Nullable.toOption {
+    | Some(elem) => {
+        let form1 = elem->makeForm(threeDsAuthoriseUrl.current, "3dsFrictionLess")
+        form1.submit()
+      }
+    | None => ()
+    }
+  }
+
   React.useEffect0(() => {
     handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
     let handle = (ev: Window.event) => {
@@ -24,7 +38,7 @@ let make = () => {
           ->getJsonObjectFromDict("headers")
           ->JSON.Decode.object
           ->Option.getOr(Dict.make())
-        let threeDsAuthoriseUrl =
+        threeDsAuthoriseUrl.current =
           metaDataDict
           ->getJsonObjectFromDict("threeDSData")
           ->JSON.Decode.object
@@ -48,38 +62,47 @@ let make = () => {
         )
         ->then(json => {
           let dict = json->JSON.Decode.object->Option.getOr(Dict.make())
-          let creq = dict->getString("challenge_request", "")
-          let transStatus = dict->getString("trans_status", "Y")
-          let acsUrl = dict->getString("acs_url", "")
+          if dict->Dict.get("error")->Option.isSome {
+            let errorObj = PaymentError.itemToObjMapper(dict)
+            handlePostMessage([("fullscreen", false->JSON.Encode.bool)])
+            postFailedSubmitResponse(
+              ~errortype=errorObj.error.type_,
+              ~message=errorObj.error.message,
+            )
+            JSON.Encode.null->resolve
+          } else {
+            let creq = dict->getString("challenge_request", "")
+            let transStatus = dict->getString("trans_status", "Y")
+            let acsUrl = dict->getString("acs_url", "")
 
-          let ele = Window.querySelector("#threeDsAuthDiv")
+            let ele = Window.querySelector("#threeDsAuthDiv")
 
-          LoggerUtils.handleLogging(
-            ~optLogger=Some(logger),
-            ~eventName=DISPLAY_THREE_DS_SDK,
-            ~value=transStatus,
-            ~paymentMethod="CARD",
-            (),
-          )
+            LoggerUtils.handleLogging(
+              ~optLogger=Some(logger),
+              ~eventName=DISPLAY_THREE_DS_SDK,
+              ~value=transStatus,
+              ~paymentMethod="CARD",
+              (),
+            )
 
-          switch ele->Nullable.toOption {
-          | Some(elem) =>
-            if transStatus === "C" {
-              setloader(_ => false)
-              let form = elem->makeForm(acsUrl, "3dsChallenge")
-              let input = Types.createElement("input")
-              input.name = "creq"
-              input.value = creq
-              form.target = "threeDsAuthFrame"
-              form.appendChild(input)
-              form.submit()
-            } else {
-              let form1 = elem->makeForm(threeDsAuthoriseUrl, "3dsFrictionLess")
-              form1.submit()
+            switch ele->Nullable.toOption {
+            | Some(elem) =>
+              if transStatus === "C" {
+                setloader(_ => false)
+                let form = elem->makeForm(acsUrl, "3dsChallenge")
+                let input = Types.createElement("input")
+                input.name = "creq"
+                input.value = creq
+                form.target = "threeDsAuthFrame"
+                form.appendChild(input)
+                form.submit()
+              } else {
+                handleFrictionLess()
+              }
+            | None => ()
             }
-          | None => ()
+            resolve(json)
           }
-          resolve(json)
         })
         ->catch(err => {
           let exceptionMessage = err->formatException
@@ -91,6 +114,8 @@ let make = () => {
             ~logType=ERROR,
             (),
           )
+          let errorObj = PaymentError.itemToObjMapper(dict)
+          postFailedSubmitResponse(~errortype=errorObj.error.type_, ~message=errorObj.error.message)
           JSON.Encode.null->resolve
         })
         ->ignore
@@ -100,7 +125,21 @@ let make = () => {
     Some(() => {Window.removeEventListener("message", handle)})
   })
 
-  <Modal loader={loader} showClose=false openModal setOpenModal>
+  React.useEffect(() => {
+    if expiryTime < 1000.0 {
+      handleFrictionLess()
+    }
+    let intervalID = setInterval(() => {
+      setExpiryTime(prev => prev -. 1000.0)
+    }, 1000)
+    Some(
+      () => {
+        clearInterval(intervalID)
+      },
+    )
+  }, [expiryTime])
+
+  <Modal loader={loader} openModal setOpenModal closeCallback={handleFrictionLess}>
     <div className="backdrop-blur-xl">
       <div id="threeDsAuthDiv" className="hidden" />
       <iframe

diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
@@ -121,6 +121,10 @@ let threeDsAuth = (~clientSecret, ~optLogger, ~threeDsMethodComp, ~headers) => {
           ~logCategory=API,
           (),
         )
+        let dict = data->getDictFromJson
+        let errorObj = PaymentError.itemToObjMapper(dict)
+        closePaymentLoaderIfAny()
+        postFailedSubmitResponse(~errortype=errorObj.error.type_, ~message=errorObj.error.message)
         JSON.Encode.null->resolve
       })
     } else {

diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res
@@ -604,11 +604,6 @@ let make = (
           }
           switch eventDataObject->getOptionalJsonFromJson("poll_status") {
           | Some(val) => {
-              handlePostMessage([
-                ("fullscreen", true->JSON.Encode.bool),
-                ("param", "paymentloader"->JSON.Encode.string),
-                ("iframeId", selectorString->JSON.Encode.string),
-              ])
               let dict = val->getDictFromJson
               let pollId = dict->getString("poll_id", "")
               let interval =