refactor: Moved HTTP requests to within iframe

aws/hyperswitch_web_aws_production_deployment.sh

@@ -76,12 +76,12 @@ echo $( (aws s3api put-bucket-policy --bucket $MY_AWS_S3_BUCKET_NAME --policy "$
 
 echo "Bucket configuration updated"
 
-echo "Enter the backend endpoint your Hyperswitch Client will hit (hosted Hyperswitch Backend, https://sandbox.hyperswitch.io is taken by default):"
+echo "Enter the backend endpoint your Hyperswitch Client will hit (hosted Hyperswitch Backend, https://beta.hyperswitch.io/api is taken by default):"
 read AWS_BACKEND_URL </dev/tty
 
 if [ -z $AWS_BACKEND_URL ]; then
-    echo "Setting backend URL value to https://sandbox.hyperswitch.io by default"
-    AWS_BACKEND_URL="https://sandbox.hyperswitch.io"
+    echo "Setting backend URL value to https://beta.hyperswitch.io/api by default"
+    AWS_BACKEND_URL="https://beta.hyperswitch.io/api"
 
 fi
 

aws/hyperswitch_web_aws_setup.sh

@@ -11,20 +11,20 @@ command_discovery() {
 command_discovery curl
 command_discovery aws
 
-echo "Please enter the URL where you have hosted Hyperswitch Backend (https://sandbox.hyperswitch.io) "
+echo "Please enter the URL where you have hosted Hyperswitch Backend (https://beta.hyperswitch.io/api) "
 read HYPERSWITCH_SERVER_URL < /dev/tty
 
 if [ -z "$HYPERSWITCH_SERVER_URL" ]; then
-    echo "Using default api url: https://sandbox.hyperswitch.io"
-    HYPERSWITCH_SERVER_URL="https://sandbox.hyperswitch.io"
+    echo "Using default api url: https://beta.hyperswitch.io/api"
+    HYPERSWITCH_SERVER_URL="https://beta.hyperswitch.io/api"
 fi
 
-# echo "Please enter the api url (https://sandbox.hyperswitch.io) "
+# echo "Please enter the api url (https://beta.hyperswitch.io/api) "
 # read apiBaseUrl < /dev/tty
 
 # if [ -z "$apiBaseUrl" ]; then
-#     echo "Using default api url: https://sandbox.hyperswitch.io"
-#     apiBaseUrl="https://sandbox.hyperswitch.io"
+#     echo "Using default api url: https://beta.hyperswitch.io/api"
+#     apiBaseUrl="https://beta.hyperswitch.io/api"
 # fi
 
 echo "Please enter the URL where you have hosted Hyperswitch Client SDK (https://beta.hyperswitch.io/v1) "

src/App.res

@@ -30,9 +30,7 @@ let make = () => {
         let clientSecret = CardUtils.getQueryParamsDictforKey(url.search, "clientSecret")
         let sessionId = CardUtils.getQueryParamsDictforKey(url.search, "sessionId")
         let publishableKey = CardUtils.getQueryParamsDictforKey(url.search, "publishableKey")
-        let endpoint =
-          CardUtils.getQueryParamsDictforKey(url.search, "endpoint")->decodeURIComponent
-        <PreMountLoader publishableKey sessionId clientSecret endpoint />
+        <PreMountLoader publishableKey sessionId clientSecret />
       }
     | "achBankTransfer"
     | "bacsBankTransfer"

src/Payments/PreMountLoader.res

@@ -1,83 +1,108 @@
 @react.component
-let make = (~sessionId as _, ~publishableKey as _, ~clientSecret as _, ~endpoint as _) => {
-  // open Utils
-  // let logger = OrcaLogger.make(
-  //   ~sessionId,
-  //   ~source=Loader,
-  //   ~merchantId=publishableKey,
-  //   ~clientSecret,
-  //   (),
-  // )
+let make = (~sessionId, ~publishableKey, ~clientSecret) => {
+  open Utils
+  let (paymentMethodsResponseSent, setPaymentMethodsResponseSent) = React.useState(_ => false)
+  let (
+    customerPaymentMethodsResponseSent,
+    setCustomerPaymentMethodsResponseSent,
+  ) = React.useState(_ => false)
+  let (sessionTokensResponseSent, setSessionTokensResponseSent) = React.useState(_ => false)
+  let logger = OrcaLogger.make(
+    ~sessionId,
+    ~source=Loader,
+    ~merchantId=publishableKey,
+    ~clientSecret,
+    (),
+  )
 
-  // // let (
-  // //   paymentMethodsResponse,
-  // //   customerPaymentMethodsResponse,
-  // //   sessionTokensResponse,
-  // // ) = React.useMemo0(() => {
-  // //   (
-  // //     PaymentHelpers.fetchPaymentMethodList(
-  // //       ~clientSecret,
-  // //       ~publishableKey,
-  // //       ~logger,
-  // //       ~switchToCustomPod=false,
-  // //       ~endpoint,
-  // //     ),
-  // //     PaymentHelpers.fetchCustomerDetails(
-  // //       ~clientSecret,
-  // //       ~publishableKey,
-  // //       ~optLogger=Some(logger),
-  // //       ~switchToCustomPod=false,
-  // //       ~endpoint,
-  // //     ),
-  // //     PaymentHelpers.fetchSessions(
-  // //       ~clientSecret,
-  // //       ~publishableKey,
-  // //       ~optLogger=Some(logger),
-  // //       ~switchToCustomPod=false,
-  // //       ~endpoint,
-  // //       (),
-  // //     ),
-  // //   )
-  // // })
+  let endpoint = ApiEndpoint.getApiEndPoint(~publishableKey, ())
 
-  // // let sendPromiseData = (promise, key) => {
-  // //   open Promise
-  // //   promise
-  // //   ->then(res => {
-  // //     handlePostMessage([("response", res), ("data", key->JSON.Encode.string)])
-  // //     resolve()
-  // //   })
-  // //   ->catch(_err => {
-  // //     handlePostMessage([("response", JSON.Encode.null), ("data", key->JSON.Encode.string)])
-  // //     resolve()
-  // //   })
-  // //   ->ignore
-  // // }
+  let paymentMethodsResponse = React.useMemo0(() =>
+    PaymentHelpers.fetchPaymentMethodList(
+      ~clientSecret,
+      ~publishableKey,
+      ~logger,
+      ~switchToCustomPod=false,
+      ~endpoint,
+    )
+  )
 
-  // // React.useEffect0(() => {
-  // //   let handle = (ev: Window.event) => {
-  // //     let json = try {
-  // //       ev.data->JSON.parseExn
-  // //     } catch {
-  // //     | _ => JSON.Encode.null
-  // //     }
-  // //     let dict = json->Utils.getDictFromJson
-  // //     if dict->Dict.get("sendPaymentMethodsResponse")->Option.isSome {
-  // //       paymentMethodsResponse->sendPromiseData("payment_methods")
-  // //     } else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Option.isSome {
-  // //       customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
-  // //     } else if dict->Dict.get("sendSessionTokensResponse")->Option.isSome {
-  // //       sessionTokensResponse->sendPromiseData("session_tokens")
-  // //     }
-  // //   }
-  // //   Window.addEventListener("message", handle)
-  // //   handlePostMessage([("preMountLoaderInitCallback", true->JSON.Encode.bool)])
-  // //   Some(
-  // //     () => {
-  // //       Window.removeEventListener("message", handle)
-  // //     },
-  // //   )
-  // // })
+  let customerPaymentMethodsResponse = React.useMemo0(() =>
+    PaymentHelpers.fetchCustomerPaymentMethodList(
+      ~clientSecret,
+      ~publishableKey,
+      ~optLogger=Some(logger),
+      ~switchToCustomPod=false,
+      ~endpoint,
+    )
+  )
+
+  let sessionTokensResponse = React.useMemo0(() =>
+    PaymentHelpers.fetchSessions(
+      ~clientSecret,
+      ~publishableKey,
+      ~optLogger=Some(logger),
+      ~switchToCustomPod=false,
+      ~endpoint,
+      (),
+    )
+  )
+
+  let sendPromiseData = (promise, key) => {
+    open Promise
+    promise
+    ->then(res => {
+      handlePostMessage([("response", res), ("data", key->JSON.Encode.string)])
+      switch key {
+      | "payment_methods" => setPaymentMethodsResponseSent(_ => true)
+      | "session_tokens" => setSessionTokensResponseSent(_ => true)
+      | "customer_payment_methods" => setCustomerPaymentMethodsResponseSent(_ => true)
+      | _ => ()
+      }
+      resolve()
+    })
+    ->catch(_err => {
+      handlePostMessage([("response", JSON.Encode.null), ("data", key->JSON.Encode.string)])
+      resolve()
+    })
+    ->ignore
+  }
+
+  let handle = (ev: Window.event) => {
+    let json = try {
+      ev.data->JSON.parseExn
+    } catch {
+    | _ => JSON.Encode.null
+    }
+    let dict = json->Utils.getDictFromJson
+    if dict->Dict.get("sendPaymentMethodsResponse")->Belt.Option.isSome {
+      paymentMethodsResponse->sendPromiseData("payment_methods")
+    } else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Belt.Option.isSome {
+      customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
+    } else if dict->Dict.get("sendSessionTokensResponse")->Belt.Option.isSome {
+      sessionTokensResponse->sendPromiseData("session_tokens")
+    }
+  }
+
+  React.useEffect0(() => {
+    Window.addEventListener("message", handle)
+    handlePostMessage([("preMountLoaderIframeMountedCallback", true->JSON.Encode.bool)])
+    Some(
+      () => {
+        Window.removeEventListener("message", handle)
+      },
+    )
+  })
+
+  React.useEffect3(() => {
+    if (
+      paymentMethodsResponseSent && customerPaymentMethodsResponseSent && sessionTokensResponseSent
+    ) {
+      handlePostMessage([("preMountLoaderIframeUnMount", true->JSON.Encode.bool)])
+      Window.removeEventListener("message", handle)
+    }
+    None
+  }, (paymentMethodsResponseSent, customerPaymentMethodsResponseSent, sessionTokensResponseSent))
 
   React.null
 }

src/Utilities/ApiEndpoint.res

@@ -14,7 +14,7 @@ let getApiEndPoint = (~publishableKey="", ~isConfirmCall=false, ()) => {
   | Some(str) => str
   | None =>
     let backendEndPoint = isConfirmCall ? GlobalVars.confirmEndPoint : GlobalVars.backendEndPoint
-    GlobalVars.isProd && testMode ? "https://sandbox.hyperswitch.io" : backendEndPoint
+    GlobalVars.isProd && testMode ? "https://beta.hyperswitch.io/api" : backendEndPoint
   }
 }
 

src/Utilities/PaymentHelpers.res

@@ -1168,7 +1168,7 @@ let fetchPaymentMethodList = (
   })
 }
 
-let fetchCustomerDetails = (
+let fetchCustomerPaymentMethodList = (
   ~clientSecret,
   ~publishableKey,
   ~endpoint,

src/Utilities/Utils.res

@@ -1234,3 +1234,14 @@ let makeOneClickHandlerPromise = sdkHandleOneClickConfirmPayment => {
     }
   })
 }
+
+let generateRandomString = length => {
+  let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+  let result = ref("")
+  let charactersLength = characters->String.length
+  Int.range(0, length)->Array.forEach(_ => {
+    let charIndex = mod((Math.random() *. 100.0)->Float.toInt, charactersLength)
+    result := result.contents ++ characters->String.charAt(charIndex)
+  })
+  result.contents
+}