refactor: Moved HTTP requests to within iframe

To reduce network latency by eliminating the need for cross origin requests and the PREFLIGHT requests associated to them
juspay · Jan 31, 2024 · fe49a56 · fe49a56
1 parent e8a512c
commit fe49a56
Show file tree

Hide file tree

Showing 3 changed files with 531 additions and 486 deletions.
diff --git a/src/App.res b/src/App.res
@@ -12,15 +12,18 @@ let make = () => {
     log
   })
 
-  React.useEffect1(()=>{
-    setLoggerState(._=>logger)
+  React.useEffect1(() => {
+    setLoggerState(._ => logger)
     None
-  },[logger])
+  }, [logger])
 
   let renderFullscreen = {
     switch fullscreenMode {
     | "paymentloader" => <PaymentLoader />
-    | "fullscreen" => <div id="fullscreen"> <FullScreenDivDriver /> </div>
+    | "fullscreen" =>
+      <div id="fullscreen">
+        <FullScreenDivDriver />
+      </div>
     | "qrData" => <QRCodeDisplay />
     | "preMountLoader" => {
         let clientSecret = CardUtils.getQueryParamsDictforKey(url.search, "clientSecret")

diff --git a/src/Payments/PreMountLoader.res b/src/Payments/PreMountLoader.res
@@ -1,83 +1,83 @@
 @react.component
 let make = (~sessionId, ~publishableKey, ~clientSecret, ~endpoint) => {
-  // open Utils
-  // let logger = OrcaLogger.make(
-  //   ~sessionId,
-  //   ~source=Loader,
-  //   ~merchantId=publishableKey,
-  //   ~clientSecret,
-  //   (),
-  // )
+  open Utils
+  let logger = OrcaLogger.make(
+    ~sessionId,
+    ~source=Loader,
+    ~merchantId=publishableKey,
+    ~clientSecret,
+    (),
+  )
 
-  // // let (
-  // //   paymentMethodsResponse,
-  // //   customerPaymentMethodsResponse,
-  // //   sessionTokensResponse,
-  // // ) = React.useMemo0(() => {
-  // //   (
-  // //     PaymentHelpers.usePaymentMethodList(
-  // //       ~clientSecret,
-  // //       ~publishableKey,
-  // //       ~logger,
-  // //       ~switchToCustomPod=false,
-  // //       ~endpoint,
-  // //     ),
-  // //     PaymentHelpers.useCustomerDetails(
-  // //       ~clientSecret,
-  // //       ~publishableKey,
-  // //       ~optLogger=Some(logger),
-  // //       ~switchToCustomPod=false,
-  // //       ~endpoint,
-  // //     ),
-  // //     PaymentHelpers.useSessions(
-  // //       ~clientSecret,
-  // //       ~publishableKey,
-  // //       ~optLogger=Some(logger),
-  // //       ~switchToCustomPod=false,
-  // //       ~endpoint,
-  // //       (),
-  // //     ),
-  // //   )
-  // // })
+  let (
+    paymentMethodsResponse,
+    customerPaymentMethodsResponse,
+    sessionTokensResponse,
+  ) = React.useMemo0(() => {
+    (
+      PaymentHelpers.usePaymentMethodList(
+        ~clientSecret,
+        ~publishableKey,
+        ~logger,
+        ~switchToCustomPod=false,
+        ~endpoint,
+      ),
+      PaymentHelpers.useCustomerDetails(
+        ~clientSecret,
+        ~publishableKey,
+        ~optLogger=Some(logger),
+        ~switchToCustomPod=false,
+        ~endpoint,
+      ),
+      PaymentHelpers.useSessions(
+        ~clientSecret,
+        ~publishableKey,
+        ~optLogger=Some(logger),
+        ~switchToCustomPod=false,
+        ~endpoint,
+        (),
+      ),
+    )
+  })
 
-  // // let sendPromiseData = (promise, key) => {
-  // //   open Promise
-  // //   promise
-  // //   ->then(res => {
-  // //     handlePostMessage([("response", res), ("data", key->Js.Json.string)])
-  // //     resolve()
-  // //   })
-  // //   ->catch(_err => {
-  // //     handlePostMessage([("response", Js.Json.null), ("data", key->Js.Json.string)])
-  // //     resolve()
-  // //   })
-  // //   ->ignore
-  // // }
+  let sendPromiseData = (promise, key) => {
+    open Promise
+    promise
+    ->then(res => {
+      handlePostMessage([("response", res), ("data", key->Js.Json.string)])
+      resolve()
+    })
+    ->catch(_err => {
+      handlePostMessage([("response", Js.Json.null), ("data", key->Js.Json.string)])
+      resolve()
+    })
+    ->ignore
+  }
 
-  // // React.useEffect0(() => {
-  // //   let handle = (ev: Window.event) => {
-  // //     let json = try {
-  // //       ev.data->Js.Json.parseExn
-  // //     } catch {
-  // //     | _ => Js.Json.null
-  // //     }
-  // //     let dict = json->Utils.getDictFromJson
-  // //     if dict->Js.Dict.get("sendPaymentMethodsResponse")->Belt.Option.isSome {
-  // //       paymentMethodsResponse->sendPromiseData("payment_methods")
-  // //     } else if dict->Js.Dict.get("sendCustomerPaymentMethodsResponse")->Belt.Option.isSome {
-  // //       customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
-  // //     } else if dict->Js.Dict.get("sendSessionTokensResponse")->Belt.Option.isSome {
-  // //       sessionTokensResponse->sendPromiseData("session_tokens")
-  // //     }
-  // //   }
-  // //   Window.addEventListener("message", handle)
-  // //   handlePostMessage([("preMountLoaderInitCallback", true->Js.Json.boolean)])
-  // //   Some(
-  // //     () => {
-  // //       Window.removeEventListener("message", handle)
-  // //     },
-  // //   )
-  // // })
+  React.useEffect0(() => {
+    let handle = (ev: Window.event) => {
+      let json = try {
+        ev.data->Js.Json.parseExn
+      } catch {
+      | _ => Js.Json.null
+      }
+      let dict = json->Utils.getDictFromJson
+      if dict->Js.Dict.get("sendPaymentMethodsResponse")->Belt.Option.isSome {
+        paymentMethodsResponse->sendPromiseData("payment_methods")
+      } else if dict->Js.Dict.get("sendCustomerPaymentMethodsResponse")->Belt.Option.isSome {
+        customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
+      } else if dict->Js.Dict.get("sendSessionTokensResponse")->Belt.Option.isSome {
+        sessionTokensResponse->sendPromiseData("session_tokens")
+      }
+    }
+    Window.addEventListener("message", handle)
+    handlePostMessage([("preMountLoaderInitCallback", true->Js.Json.boolean)])
+    Some(
+      () => {
+        Window.removeEventListener("message", handle)
+      },
+    )
+  })
 
   React.null
 }