feat(3ds): three DS SDK - adding logs to track milestone events

src/ThreeDSAuth.res

@@ -5,7 +5,7 @@ let make = () => {
   let (openModal, setOpenModal) = React.useState(_ => false)
   let (loader, setloader) = React.useState(_ => true)
 
-  let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+  let logger = OrcaLogger.make()
 
   React.useEffect0(() => {
     handlePostMessage([("iframeMountedCallback", true->JSON.Encode.bool)])
@@ -16,6 +16,9 @@ let make = () => {
         let metadata = dict->getJsonObjectFromDict("metadata")
         let metaDataDict = metadata->JSON.Decode.object->Option.getOr(Dict.make())
         let paymentIntentId = metaDataDict->getString("paymentIntentId", "")
+        let publishableKey = metaDataDict->getString("publishableKey", "")
+        logger.setClientSecret(paymentIntentId)
+        logger.setMerchantId(publishableKey)
         let headersDict =
           metaDataDict
           ->getJsonObjectFromDict("headers")
@@ -51,6 +54,14 @@ let make = () => {
 
           let ele = Window.querySelector("#threeDsAuthDiv")
 
+          LoggerUtils.handleLogging(
+            ~optLogger=Some(logger),
+            ~eventName=DISPLAY_THREE_DS_SDK,
+            ~value=transStatus,
+            ~paymentMethod="CARD",
+            (),
+          )
+
           switch ele->Nullable.toOption {
           | Some(elem) =>
             if transStatus === "C" {
@@ -63,13 +74,25 @@ let make = () => {
               form.appendChild(input)
               form.submit()
             } else {
-              let form1 = elem->OrcaUtils.makeForm(threeDsAuthoriseUrl, "3dsFrintionLess")
+              let form1 = elem->OrcaUtils.makeForm(threeDsAuthoriseUrl, "3dsFrictionLess")
               form1.submit()
             }
           | None => ()
           }
           resolve(json)
         })
+        ->catch(err => {
+          let exceptionMessage = err->Utils.formatException
+          LoggerUtils.handleLogging(
+            ~optLogger=Some(logger),
+            ~eventName=DISPLAY_THREE_DS_SDK,
+            ~value=exceptionMessage->JSON.stringify,
+            ~paymentMethod="CARD",
+            ~logType=ERROR,
+            (),
+          )
+          JSON.Encode.null->resolve
+        })
         ->ignore
       }
     }

src/ThreeDSMethod.res

@@ -1,7 +1,7 @@
 open Utils
 @react.component
 let make = () => {
-  let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+  let logger = OrcaLogger.make()
 
   let mountToInnerHTML = innerHTML => {
     let ele = Window.querySelector("#threeDsInvisibleIframe")
@@ -40,33 +40,63 @@ let make = () => {
           ->Belt.Option.flatMap(JSON.Decode.object)
           ->Belt.Option.flatMap(x => x->Dict.get("three_ds_method_data"))
           ->Option.getOr(Dict.make()->JSON.Encode.object)
+        let paymentIntentId =
+          metaDataDict
+          ->Dict.get("paymentIntentId")
+          ->Belt.Option.flatMap(JSON.Decode.string)
+          ->Option.getOr("")
+        let publishableKey =
+          metaDataDict
+          ->Dict.get("publishableKey")
+          ->Belt.Option.flatMap(JSON.Decode.string)
+          ->Option.getOr("")
         let iframeId = metaDataDict->getString("iframeId", "")
 
+        logger.setClientSecret(paymentIntentId)
+        logger.setMerchantId(publishableKey)
+
         open Promise
         PaymentHelpers.threeDsMethod(threeDsUrl, threeDsMethodData, ~optLogger=Some(logger))
         ->then(res => {
-          mountToInnerHTML(res)
-          resolve(res)
-        })
-        ->then(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)
+          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(e => {
+        ->catch(err => {
+          let exceptionMessage = err->Utils.formatException
           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),
           ])
-          reject(e)
+          LoggerUtils.handleLogging(
+            ~optLogger=Some(logger),
+            ~eventName=THREE_DS_METHOD_RESULT,
+            ~value=exceptionMessage->JSON.stringify,
+            ~paymentMethod="CARD",
+            ~logType=ERROR,
+            (),
+          )
+          reject(err)
         })
         ->ignore
 

src/Utilities/PaymentHelpers.res

@@ -78,7 +78,7 @@ let threeDsMethod = (url, threeDsMethodData, ~optLogger) => {
     ~optLogger,
     ~url,
     ~type_="request",
-    ~eventName=RETRIEVE_CALL_INIT,
+    ~eventName=THREE_DS_METHOD_CALL_INIT,
     ~logType=INFO,
     ~logCategory=API,
     (),
@@ -88,11 +88,43 @@ let threeDsMethod = (url, threeDsMethodData, ~optLogger) => {
 
   fetchApiWithNoCors(url, ~method=#POST, ~bodyStr=body, ())
   ->then(res => {
-    res->Fetch.Response.text
+    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,
+          ~type_="err",
+          ~eventName=THREE_DS_METHOD_CALL,
+          ~logType=ERROR,
+          ~logCategory=API,
+          (),
+        )
+        ""->resolve
+      })
+    } else {
+      logApi(~optLogger, ~url, ~statusCode, ~type_="response", ~eventName=THREE_DS_METHOD_CALL, ())
+      res->Fetch.Response.text
+    }
   })
-  ->catch(e => {
-    Console.log2("Unable to call 3ds method ", e)
-    reject(e)
+  ->catch(err => {
+    let exceptionMessage = err->Utils.formatException
+    Console.log2("Unable to call 3ds method ", exceptionMessage)
+    logApi(
+      ~optLogger,
+      ~url,
+      ~eventName=THREE_DS_METHOD_CALL,
+      ~type_="no_response",
+      ~data=exceptionMessage,
+      ~logType=ERROR,
+      ~logCategory=API,
+      (),
+    )
+    reject(err)
   })
 }
 
@@ -116,16 +148,50 @@ let threeDsAuth = (~clientSecret, ~optLogger, ~threeDsMethodComp, ~headers) => {
     ~optLogger,
     ~url,
     ~type_="request",
-    ~eventName=RETRIEVE_CALL_INIT,
+    ~eventName=AUTHENTICATION_CALL_INIT,
     ~logType=INFO,
     ~logCategory=API,
     (),
   )
   fetchApi(url, ~method=#POST, ~bodyStr=body->JSON.stringify, ~headers=headers->Dict.fromArray, ())
-  ->then(res => res->Fetch.Response.json)
-  ->catch(e => {
-    Console.log2("Unable to call 3ds auth ", e)
-    reject(e)
+  ->then(res => {
+    let statusCode = res->Fetch.Response.status->Int.toString
+    if statusCode->String.charAt(0) !== "2" {
+      res
+      ->Fetch.Response.json
+      ->then(data => {
+        logApi(
+          ~optLogger,
+          ~url,
+          ~data,
+          ~statusCode,
+          ~type_="err",
+          ~eventName=AUTHENTICATION_CALL,
+          ~logType=ERROR,
+          ~logCategory=API,
+          (),
+        )
+        JSON.Encode.null->resolve
+      })
+    } else {
+      logApi(~optLogger, ~url, ~statusCode, ~type_="response", ~eventName=AUTHENTICATION_CALL, ())
+      res->Fetch.Response.json
+    }
+  })
+  ->catch(err => {
+    let exceptionMessage = err->Utils.formatException
+    Console.log2("Unable to call 3ds auth ", exceptionMessage)
+    logApi(
+      ~optLogger,
+      ~url,
+      ~eventName=AUTHENTICATION_CALL,
+      ~type_="no_response",
+      ~data=exceptionMessage,
+      ~logType=ERROR,
+      ~logCategory=API,
+      (),
+    )
+    reject(err)
   })
 }
 
@@ -416,6 +482,7 @@ let rec intentCall = (
                   [
                     ("qrData", qrData->JSON.Encode.string),
                     ("paymentIntentId", clientSecret->JSON.Encode.string),
+                    ("publishableKey", confirmParam.publishableKey->JSON.Encode.string),
                     ("headers", headerObj->JSON.Encode.object),
                     ("expiryTime", expiryTime->Belt.Float.toString->JSON.Encode.string),
                     ("url", url.href->JSON.Encode.string),
@@ -462,11 +529,20 @@ let rec intentCall = (
                   [
                     ("threeDSData", threeDsData->JSON.Encode.object),
                     ("paymentIntentId", clientSecret->JSON.Encode.string),
+                    ("publishableKey", confirmParam.publishableKey->JSON.Encode.string),
                     ("headers", headerObj->JSON.Encode.object),
                     ("url", url.href->JSON.Encode.string),
                     ("iframeId", iframeId->JSON.Encode.string),
                   ]->Dict.fromArray
 
+                handleLogging(
+                  ~optLogger,
+                  ~value=do3dsMethodCall ? "Y" : "N",
+                  ~eventName=THREE_DS_METHOD,
+                  ~paymentMethod,
+                  (),
+                )
+
                 if do3dsMethodCall {
                   handlePostMessage([
                     ("fullscreen", true->JSON.Encode.bool),

src/orca-loader/Elements.res

@@ -121,7 +121,12 @@ let make = (
         let msg = [("paymentMethodList", json)]->Dict.fromArray
         mountedIframeRef->Window.iframePostMessage(msg)
         let maskedPayload = json->PaymentHelpers.maskPayload->JSON.stringify
-        logger.setLogInfo(~value=maskedPayload, ~eventName=PAYMENT_METHODS_RESPONSE, ())
+        logger.setLogInfo(
+          ~value="",
+          ~internalMetadata=maskedPayload,
+          ~eventName=PAYMENT_METHODS_RESPONSE,
+          (),
+        )
         // }, 5000)->ignore
         json->resolve
       })

src/orca-log-catcher/OrcaLogger.res

@@ -11,6 +11,10 @@ type eventName =
   | INPUT_FIELD_CHANGED
   | RETRIEVE_CALL_INIT
   | RETRIEVE_CALL
+  | AUTHENTICATION_CALL_INIT
+  | AUTHENTICATION_CALL
+  | THREE_DS_METHOD_CALL_INIT
+  | THREE_DS_METHOD_CALL
   | CONFIRM_CALL_INIT
   | CONFIRM_CALL
   | SESSIONS_CALL_INIT
@@ -54,6 +58,9 @@ type eventName =
   | DISPLAY_BANK_TRANSFER_INFO_PAGE
   | DISPLAY_QR_CODE_INFO_PAGE
   | DISPLAY_VOUCHER
+  | DISPLAY_THREE_DS_SDK
+  | THREE_DS_METHOD
+  | THREE_DS_METHOD_RESULT
   | PAYMENT_METHODS_RESPONSE
   | LOADER_CHANGED
   | PAYMENT_SESSION_INITIATED
@@ -69,6 +76,10 @@ let eventNameToStrMapper = eventName => {
   | INPUT_FIELD_CHANGED => "INPUT_FIELD_CHANGED"
   | RETRIEVE_CALL_INIT => "RETRIEVE_CALL_INIT"
   | 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"
@@ -112,6 +123,9 @@ let eventNameToStrMapper = eventName => {
   | DISPLAY_BANK_TRANSFER_INFO_PAGE => "DISPLAY_BANK_TRANSFER_INFO_PAGE"
   | DISPLAY_QR_CODE_INFO_PAGE => "DISPLAY_QR_CODE_INFO_PAGE"
   | DISPLAY_VOUCHER => "DISPLAY_VOUCHER"
+  | DISPLAY_THREE_DS_SDK => "DISPLAY_THREE_DS_SDK"
+  | THREE_DS_METHOD => "THREE_DS_METHOD"
+  | THREE_DS_METHOD_RESULT => "THREE_DS_METHOD_RESULT"
   | PAYMENT_METHODS_RESPONSE => "PAYMENT_METHODS_RESPONSE"
   | LOADER_CHANGED => "LOADER_CHANGED"
   | PAYMENT_SESSION_INITIATED => "PAYMENT_SESSION_INITIATED"
@@ -500,6 +514,8 @@ let make = (
       PAYMENT_DATA_FILLED,
       PAYMENT_ATTEMPT,
       CONFIRM_CALL,
+      AUTHENTICATION_CALL,
+      THREE_DS_METHOD_CALL,
       SDK_CRASH,
       REDIRECTING_USER,
       DISPLAY_BANK_TRANSFER_INFO_PAGE,
@@ -538,6 +554,8 @@ let make = (
         | _ => -1.
         }
       }
+    | AUTHENTICATION_CALL
+    | THREE_DS_METHOD_CALL
     | RETRIEVE_CALL
     | CONFIRM_CALL
     | SESSIONS_CALL