From 648ea87d8e2b0c989edbe7949b43a2c1e70e70cc Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Thu, 18 Apr 2024 13:04:57 +0530
Subject: [PATCH 1/6] feat: mandate changes for Saved Card flow (#309)

Co-authored-by: Vrishab Srivatsa <136090360+vsrivatsa-juspay@users.noreply.github.com>
Co-authored-by: Vrishab Srivatsa <vrishab.srivatsa@juspay.in>
---
 ...edCheckbox.res => SaveDetailsCheckbox.res} | 18 ++++--
 src/Components/SavedMethods.res               | 48 ++++++++++++--
 src/Hooks/UtilityHooks.res                    | 13 ++++
 src/LoaderController.res                      | 15 ++++-
 src/Payments/CardPayment.res                  | 31 +++++-----
 src/Utilities/PaymentBody.res                 | 62 +++++++++++++------
 6 files changed, 140 insertions(+), 47 deletions(-)
 rename src/Components/{AnimatedCheckbox.res => SaveDetailsCheckbox.res} (70%)

diff --git a/src/Components/AnimatedCheckbox.res b/src/Components/SaveDetailsCheckbox.res
similarity index 70%
rename from src/Components/AnimatedCheckbox.res
rename to src/Components/SaveDetailsCheckbox.res
index 7a6fd1726..838fe86c8 100644
--- a/src/Components/AnimatedCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -1,12 +1,14 @@
 @react.component
 let make = (~isChecked, ~setIsChecked) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
+  let {business} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+
   let css = `.container {
   display: flex;
   cursor: pointer;
   position: relative;
   justify-content: center;
-  align-items: center;
 }
 
 .container input {
@@ -42,17 +44,23 @@ let make = (~isChecked, ~setIsChecked) => {
     setIsChecked(_ => value)
   }
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let (checkboxState, checkedState, checkBoxLabelSate) = isChecked
+  let (checkboxState, checkedState, checkBoxLabelState) = isChecked
     ? ("Checkbox--checked", "CheckboxInput--checked", "CheckboxLabel--checked")
     : ("", "", "")
 
+  let saveCardCheckboxLabel = if showFields {
+    localeString.saveCardDetails
+  } else {
+    localeString.cardTerms(business.name)
+  }
+
   <div className={`Checkbox ${checkboxState} flex flex-row gap-2 items-center`}>
     <style> {React.string(css)} </style>
     <label className={`container CheckboxInput ${checkedState}`}>
       <input type_={`checkbox`} onChange />
-      <div className={`checkmark CheckboxInput ${checkedState}`} />
-      <div className={`CheckboxLabel ${checkBoxLabelSate} ml-2`}>
-        {React.string(localeString.saveCardDetails)}
+      <div className={`checkmark CheckboxInput ${checkedState} mt-1`} />
+      <div className={`CheckboxLabel ${checkBoxLabelState} ml-2 w-11/12`}>
+        {React.string(saveCardCheckboxLabel)}
       </div>
     </label>
   </div>
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 944506758..12c0729b4 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -1,5 +1,3 @@
-open CardUtils
-open Utils
 @react.component
 let make = (
   ~paymentToken,
@@ -10,6 +8,9 @@ let make = (
   ~paymentType,
   ~list,
 ) => {
+  open CardUtils
+  open Utils
+  open UtilityHooks
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
   let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsValid)
@@ -19,6 +20,9 @@ let make = (
     postFailedSubmitResponse(~errortype="validation_error", ~message)
     loggerState.setLogError(~value=message, ~eventName=INVALID_FORMAT, ())
   }
+  let (isSaveCardsChecked, setIsSaveCardsChecked) = React.useState(_ => false)
+  let {displaySavedPaymentMethodsCheckbox} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+  let isGuestCustomer = useIsGuestCustomer()
 
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (token, _) = paymentToken
@@ -33,6 +37,13 @@ let make = (
     }
   }
 
+  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
+    ~displaySavedPaymentMethodsCheckbox,
+    ~isSaveCardsChecked,
+    ~list,
+    ~isGuestCustomer,
+  )
+
   let bottomElement = {
     savedMethods
     ->Array.mapWithIndex((obj, i) => {
@@ -90,7 +101,7 @@ let make = (
 
   let paymentType = customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
 
-  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
+  useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -103,6 +114,7 @@ let make = (
         ~customerId,
         ~cvcNumber,
         ~requiresCvv=customerMethod.requiresCvv,
+        ~isCustomerAcceptanceRequired,
       )
     | _ => {
         let paymentMethodType = switch customerMethod.paymentMethodType {
@@ -115,6 +127,7 @@ let make = (
           ~customerId,
           ~paymentMethod=customerMethod.paymentMethod,
           ~paymentMethodType,
+          ~isCustomerAcceptanceRequired,
         )
       }
     }
@@ -153,9 +166,20 @@ let make = (
         }
       }
     }
-  }, (areRequiredFieldsValid, requiredFieldsBody, empty, complete, customerMethod))
+  }, (
+    areRequiredFieldsValid,
+    requiredFieldsBody,
+    empty,
+    complete,
+    customerMethod,
+    isCustomerAcceptanceRequired,
+  ))
   useSubmitPaymentData(submitCallback)
 
+  let conditionsForShowingSaveCardCheckbox = React.useMemo(() => {
+    !isGuestCustomer && list.payment_type !== SETUP_MANDATE && displaySavedPaymentMethodsCheckbox
+  }, (isGuestCustomer, list.payment_type, displaySavedPaymentMethodsCheckbox))
+
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
     {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
       <div
@@ -179,6 +203,22 @@ let make = (
     } else {
       <RenderIf condition={!showFields}> {bottomElement} </RenderIf>
     }}
+    <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
+      <div className="pt-4 pb-2 flex items-center justify-start">
+        <SaveDetailsCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
+      </div>
+    </RenderIf>
+    <RenderIf condition={list.payment_type === SETUP_MANDATE}>
+      <div
+        className="opacity-50 text-xs mb-2 text-left"
+        style={ReactDOMStyle.make(
+          ~color=themeObj.colorText,
+          ~marginTop=themeObj.spacingGridColumn,
+          (),
+        )}>
+        <Terms mode={Card} />
+      </div>
+    </RenderIf>
     <RenderIf condition={!showFields}>
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"
diff --git a/src/Hooks/UtilityHooks.res b/src/Hooks/UtilityHooks.res
index f34078b30..feb416e0b 100644
--- a/src/Hooks/UtilityHooks.res
+++ b/src/Hooks/UtilityHooks.res
@@ -21,3 +21,16 @@ let useHandlePostMessages = (~complete, ~empty, ~paymentType, ~savedMethod=false
     None
   }, (complete, empty, paymentType))
 }
+
+let useIsCustomerAcceptanceRequired = (
+  ~displaySavedPaymentMethodsCheckbox,
+  ~isSaveCardsChecked,
+  ~list: PaymentMethodsRecord.list,
+  ~isGuestCustomer,
+) => React.useMemo(() => {
+    if displaySavedPaymentMethodsCheckbox {
+      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
+    } else {
+      !(isGuestCustomer || list.payment_type === NORMAL)
+    }
+  }, (isSaveCardsChecked, list.payment_type, isGuestCustomer, displaySavedPaymentMethodsCheckbox))
diff --git a/src/LoaderController.res b/src/LoaderController.res
index 60e1430a5..e0b5a9aba 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -362,6 +362,15 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
         }
         if dict->getDictIsSome("paymentMethodList") {
           let list = dict->getJsonObjectFromDict("paymentMethodList")
+          let listDict = list->getDictFromJson
+          if optionsPayment.business.name === "" {
+            setOptionsPayment(prev => {
+              ...prev,
+              business: {
+                name: listDict->getString("merchant_name", ""),
+              },
+            })
+          }
           let finalLoadLatency = if launchTime <= 0.0 {
             -1.0
           } else {
@@ -370,11 +379,11 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
           let updatedState: PaymentType.loadType =
             list == Dict.make()->JSON.Encode.object
               ? LoadError(list)
-              : switch list->getDictFromJson->Dict.get("error") {
+              : switch listDict->Dict.get("error") {
                 | Some(_) => LoadError(list)
                 | None =>
                   let isNonEmptyPaymentMethodList =
-                    list->getDictFromJson->getArray("payment_methods")->Array.length > 0
+                    listDict->getArray("payment_methods")->Array.length > 0
                   isNonEmptyPaymentMethodList ? Loaded(list) : LoadError(list)
                 }
 
@@ -474,7 +483,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
       }
     }
     handleMessage(handleFun, "Error in parsing sent Data")
-  }, (showCardFormByDefault, paymentMethodOrder))
+  }, (showCardFormByDefault, paymentMethodOrder, optionsPayment))
 
   let observer = ResizeObserver.newResizerObserver(entries => {
     entries
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index acccb7ea4..14aee6d5b 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -1,7 +1,5 @@
 type target = {checked: bool}
 type event = {target: target}
-open PaymentType
-open PaymentModeType
 
 @react.component
 let make = (
@@ -12,7 +10,11 @@ let make = (
   ~paymentType: CardThemeType.mode,
   ~list: PaymentMethodsRecord.list,
 ) => {
+  open PaymentType
+  open PaymentModeType
   open Utils
+  open UtilityHooks
+
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
@@ -81,13 +83,9 @@ let make = (
     None
   }, [complete])
 
-  UtilityHooks.useHandlePostMessages(
-    ~complete=complete && areRequiredFieldsValid,
-    ~empty,
-    ~paymentType="card",
-  )
+  useHandlePostMessages(~complete=complete && areRequiredFieldsValid, ~empty, ~paymentType="card")
 
-  let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+  let isGuestCustomer = useIsGuestCustomer()
   let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)
   let (cardEmpty, cardComplete, cardInvalid) = CardUtils.useCardDetails(
     ~cvcNumber,
@@ -95,13 +93,12 @@ let make = (
     ~isCvcValidValue,
   )
 
-  let isCustomerAcceptanceRequired = React.useMemo(() => {
-    if displaySavedPaymentMethodsCheckbox {
-      isSaveCardsChecked || list.payment_type === SETUP_MANDATE
-    } else {
-      !(isGuestCustomer || list.payment_type === NORMAL)
-    }
-  }, (isSaveCardsChecked, list.payment_type))
+  let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
+    ~displaySavedPaymentMethodsCheckbox,
+    ~isSaveCardsChecked,
+    ~list,
+    ~isGuestCustomer,
+  )
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
@@ -277,7 +274,9 @@ let make = (
           />
           <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
             <div className="pt-4 pb-2 flex items-center justify-start">
-              <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />
+              <SaveDetailsCheckbox
+                isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked
+              />
             </div>
           </RenderIf>
           <RenderIf condition={isCustomerAcceptanceRequired}>
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index 740d8c93f..e98bdacf3 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -64,7 +64,27 @@ let boletoBody = (~socialSecurityNumber) => [
   ),
 ]
 
-let savedCardBody = (~paymentToken, ~customerId, ~cvcNumber, ~requiresCvv) => {
+let customerAcceptanceBody =
+  [
+    ("acceptance_type", "online"->JSON.Encode.string),
+    ("accepted_at", Date.now()->Js.Date.fromFloat->Date.toISOString->JSON.Encode.string),
+    (
+      "online",
+      [("user_agent", BrowserSpec.navigator.userAgent->JSON.Encode.string)]
+      ->Dict.fromArray
+      ->JSON.Encode.object,
+    ),
+  ]
+  ->Dict.fromArray
+  ->JSON.Encode.object
+
+let savedCardBody = (
+  ~paymentToken,
+  ~customerId,
+  ~cvcNumber,
+  ~requiresCvv,
+  ~isCustomerAcceptanceRequired,
+) => {
   let savedCardBody = [
     ("payment_method", "card"->JSON.Encode.string),
     ("payment_token", paymentToken->JSON.Encode.string),
@@ -75,29 +95,33 @@ let savedCardBody = (~paymentToken, ~customerId, ~cvcNumber, ~requiresCvv) => {
     savedCardBody->Array.push(("card_cvc", cvcNumber->JSON.Encode.string))->ignore
   }
 
+  if isCustomerAcceptanceRequired {
+    savedCardBody->Array.push(("customer_acceptance", customerAcceptanceBody))->ignore
+  }
+
   savedCardBody
 }
 
-let customerAcceptanceBody =
-  [
-    ("acceptance_type", "online"->JSON.Encode.string),
-    ("accepted_at", Date.now()->Js.Date.fromFloat->Date.toISOString->JSON.Encode.string),
-    (
-      "online",
-      [("user_agent", BrowserSpec.navigator.userAgent->JSON.Encode.string)]
-      ->Dict.fromArray
-      ->JSON.Encode.object,
-    ),
+let savedPaymentMethodBody = (
+  ~paymentToken,
+  ~customerId,
+  ~paymentMethod,
+  ~paymentMethodType,
+  ~isCustomerAcceptanceRequired,
+) => {
+  let savedPaymentMethodBody = [
+    ("payment_method", paymentMethod->JSON.Encode.string),
+    ("payment_token", paymentToken->JSON.Encode.string),
+    ("customer_id", customerId->JSON.Encode.string),
+    ("payment_method_type", paymentMethodType),
   ]
-  ->Dict.fromArray
-  ->JSON.Encode.object
 
-let savedPaymentMethodBody = (~paymentToken, ~customerId, ~paymentMethod, ~paymentMethodType) => [
-  ("payment_method", paymentMethod->JSON.Encode.string),
-  ("payment_token", paymentToken->JSON.Encode.string),
-  ("customer_id", customerId->JSON.Encode.string),
-  ("payment_method_type", paymentMethodType),
-]
+  if isCustomerAcceptanceRequired {
+    savedPaymentMethodBody->Array.push(("customer_acceptance", customerAcceptanceBody))->ignore
+  }
+
+  savedPaymentMethodBody
+}
 
 let mandateBody = paymentType => {
   [

From b13a36993bfa3e22dd12624e7c6e3033ea438159 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 18 Apr 2024 07:36:49 +0000
Subject: [PATCH 2/6] chore(release): 0.43.0 [skip ci]

# [0.43.0](https://github.com/juspay/hyperswitch-web/compare/v0.42.6...v0.43.0) (2024-04-18)

### Features

* mandate changes for Saved Card flow ([#309](https://github.com/juspay/hyperswitch-web/issues/309)) ([648ea87](https://github.com/juspay/hyperswitch-web/commit/648ea87d8e2b0c989edbe7949b43a2c1e70e70cc))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 48d862153..5b665b3ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [0.43.0](https://github.com/juspay/hyperswitch-web/compare/v0.42.6...v0.43.0) (2024-04-18)
+
+
+### Features
+
+* mandate changes for Saved Card flow ([#309](https://github.com/juspay/hyperswitch-web/issues/309)) ([648ea87](https://github.com/juspay/hyperswitch-web/commit/648ea87d8e2b0c989edbe7949b43a2c1e70e70cc))
+
 ## [0.42.6](https://github.com/juspay/hyperswitch-web/compare/v0.42.5...v0.42.6) (2024-04-17)
 
 
diff --git a/package-lock.json b/package-lock.json
index 36a57e68a..7146ea13c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.42.6",
+  "version": "0.43.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.42.6",
+      "version": "0.43.0",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudfront": "^3.414.0",
diff --git a/package.json b/package.json
index 6f3d563ec..83b1e17f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.42.6",
+  "version": "0.43.0",
   "main": "index.js",
   "private": true,
   "dependencies": {

From e42a5a3b0f68ba3264ffbe6d7afde41b1cc01d9d Mon Sep 17 00:00:00 2001
From: ArushKapoorJuspay <121166031+ArushKapoorJuspay@users.noreply.github.com>
Date: Thu, 18 Apr 2024 13:09:39 +0530
Subject: [PATCH 3/6] fix(threedsmethod): changed Three DS method API call to
 hidden Form Post (#302)

Co-authored-by: Praful Koppalkar <126236898+prafulkoppalkar@users.noreply.github.com>
Co-authored-by: Vrishab Srivatsa <vrishab.srivatsa@juspay.in>
---
 src/ThreeDSMethod.res               | 122 ++++++++++++++--------------
 src/Utilities/PaymentHelpers.res    |  63 --------------
 src/Utilities/Utils.res             |  33 +-------
 src/orca-loader/Types.res           |   4 +-
 src/orca-log-catcher/OrcaLogger.res |   8 +-
 5 files changed, 67 insertions(+), 163 deletions(-)

diff --git a/src/ThreeDSMethod.res b/src/ThreeDSMethod.res
index de218ada5..e024fd7a9 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="Y",
+      ~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,65 @@ 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
-          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),
-          ])
+        let iframeId = metaDataDict->getString("iframeId", "")
+
+        let handleFailureScenarios = value => {
           LoggerUtils.handleLogging(
             ~optLogger=Some(logger),
             ~eventName=THREE_DS_METHOD_RESULT,
-            ~value=exceptionMessage->JSON.stringify,
+            ~value,
             ~paymentMethod="CARD",
             ~logType=ERROR,
             (),
           )
-          reject(err)
-        })
-        ->ignore
+          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", stateMetadata),
+          ])
+        }
 
-        let headersDict =
-          metaDataDict
-          ->getJsonObjectFromDict("headers")
-          ->JSON.Decode.object
-          ->Option.getOr(Dict.make())
-        let headers = Dict.make()
+        let ele = Window.querySelector("#threeDsInvisibleDiv")
 
-        headersDict
-        ->Dict.toArray
-        ->Array.forEach(entries => {
-          let (x, val) = entries
-          Dict.set(headers, x, val->JSON.Decode.string->Option.getOr(""))
-        })
+        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)
+            try {
+              form.submit()
+            } catch {
+            | err => {
+                let exceptionMessage = err->Utils.formatException->JSON.stringify
+                handleFailureScenarios(exceptionMessage)
+              }
+            }
+          }
+        | None => handleFailureScenarios("Unable to Locate threeDsInvisibleDiv")
+        }
       }
     }
     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 417274284..a2e835fd8 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 da69a2211..c3b8a2d00 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"
 
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

From bd75c28566d5376a34de993e68b3c3a3add7805f Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 18 Apr 2024 07:41:22 +0000
Subject: [PATCH 4/6] chore(release): 0.43.1 [skip ci]

## [0.43.1](https://github.com/juspay/hyperswitch-web/compare/v0.43.0...v0.43.1) (2024-04-18)

### Bug Fixes

* **threedsmethod:** changed Three DS method API call to hidden Form Post ([#302](https://github.com/juspay/hyperswitch-web/issues/302)) ([e42a5a3](https://github.com/juspay/hyperswitch-web/commit/e42a5a3b0f68ba3264ffbe6d7afde41b1cc01d9d))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b665b3ef..b16e4ebea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [0.43.1](https://github.com/juspay/hyperswitch-web/compare/v0.43.0...v0.43.1) (2024-04-18)
+
+
+### Bug Fixes
+
+* **threedsmethod:** changed Three DS method API call to hidden Form Post ([#302](https://github.com/juspay/hyperswitch-web/issues/302)) ([e42a5a3](https://github.com/juspay/hyperswitch-web/commit/e42a5a3b0f68ba3264ffbe6d7afde41b1cc01d9d))
+
 # [0.43.0](https://github.com/juspay/hyperswitch-web/compare/v0.42.6...v0.43.0) (2024-04-18)
 
 
diff --git a/package-lock.json b/package-lock.json
index 7146ea13c..12dd0da77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.43.0",
+  "version": "0.43.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.43.0",
+      "version": "0.43.1",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudfront": "^3.414.0",
diff --git a/package.json b/package.json
index 83b1e17f7..801c04f5b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.43.0",
+  "version": "0.43.1",
   "main": "index.js",
   "private": true,
   "dependencies": {

From 88587ac725c03fa1362e3ad79222a290f4d86cdb Mon Sep 17 00:00:00 2001
From: Vrishab Srivatsa <136090360+vsrivatsa-juspay@users.noreply.github.com>
Date: Thu, 18 Apr 2024 13:11:30 +0530
Subject: [PATCH 5/6] fix: Added envLoggingUrl in webpack (#294)

Co-authored-by: Praful Koppalkar <126236898+prafulkoppalkar@users.noreply.github.com>
---
 webpack.common.js | 14 ++++++++++----
 webpack.dev.js    |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webpack.common.js b/webpack.common.js
index f4d6b43b9..c8fc54102 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -11,6 +11,7 @@ const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
 const sdkEnv = process.env.sdkEnv;
 const envSdkUrl = process.env.envSdkUrl;
 const envBackendUrl = process.env.envBackendUrl;
+const envLoggingUrl = process.env.envLoggingUrl;
 
 //git rev-parse --abbrev-ref HEAD
 let repoVersion = require("./package.json").version;
@@ -62,10 +63,15 @@ if (envBackendUrl === undefined) {
   confirmEndPoint = envBackendUrl;
 }
 
-let logEndpoint =
-  sdkEnv === "prod"
-    ? "https://api.hyperswitch.io/logs/sdk"
-    : "https://sandbox.hyperswitch.io/logs/sdk";
+let logEndpoint;
+if (envLoggingUrl === undefined) {
+  logEndpoint =
+    sdkEnv === "prod"
+      ? "https://api.hyperswitch.io/logs/sdk"
+      : "https://sandbox.hyperswitch.io/logs/sdk";
+} else {
+  logEndpoint = envLoggingUrl;
+}
 
 // Set this to true to enable logging
 let enableLogging = true;
diff --git a/webpack.dev.js b/webpack.dev.js
index ce80a9ad4..89044d741 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -16,6 +16,7 @@ let backendEndPoint =
 let devServer = {
   contentBase: path.join(__dirname, "dist"),
   hot: true,
+  host: "0.0.0.0",
   port: 9050,
   historyApiFallback: true,
   proxy: {

From e4d2243439e1614f1ebcc5dc055d5b41400ba508 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 18 Apr 2024 07:43:18 +0000
Subject: [PATCH 6/6] chore(release): 0.43.2 [skip ci]

## [0.43.2](https://github.com/juspay/hyperswitch-web/compare/v0.43.1...v0.43.2) (2024-04-18)

### Bug Fixes

* Added envLoggingUrl in webpack ([#294](https://github.com/juspay/hyperswitch-web/issues/294)) ([88587ac](https://github.com/juspay/hyperswitch-web/commit/88587ac725c03fa1362e3ad79222a290f4d86cdb))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b16e4ebea..65de3d68d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [0.43.2](https://github.com/juspay/hyperswitch-web/compare/v0.43.1...v0.43.2) (2024-04-18)
+
+
+### Bug Fixes
+
+* Added envLoggingUrl in webpack ([#294](https://github.com/juspay/hyperswitch-web/issues/294)) ([88587ac](https://github.com/juspay/hyperswitch-web/commit/88587ac725c03fa1362e3ad79222a290f4d86cdb))
+
 ## [0.43.1](https://github.com/juspay/hyperswitch-web/compare/v0.43.0...v0.43.1) (2024-04-18)
 
 
diff --git a/package-lock.json b/package-lock.json
index 12dd0da77..57e7a8205 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.43.1",
+  "version": "0.43.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.43.1",
+      "version": "0.43.2",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudfront": "^3.414.0",
diff --git a/package.json b/package.json
index 801c04f5b..fc2f1b50d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.43.1",
+  "version": "0.43.2",
   "main": "index.js",
   "private": true,
   "dependencies": {