fix: Moved HyperLoader script to inside preview component, remove on …

…useEffect cleanup function
juspay · Dec 18, 2023 · 787c79b · 787c79b
1 parent b3e2514
commit 787c79b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/public/hyperswitch/index.html b/public/hyperswitch/index.html
@@ -105,21 +105,6 @@
 
   <body>
     <!-- SDK Loader Manager (noscript) -->
-    <script>
-      (function (w, d) {
-        //http://localhost:9090/dist/HyperLoader.js
-        // var host = w.location.hostname;
-        var src = "https://dev.hyperswitch.io/v1/HyperLoader.js";
-        if (w && w["_env_"] && w["_env_"]["sdkBaseUrl"]) {
-          src = w["_env_"]["sdkBaseUrl"];
-        }
-        var s = d.createElement("script");
-        s.setAttribute("src", src);
-        d.body.appendChild(s);
-        console.log(window._env_.API_URL);
-      })(window, document);
-    </script>
-
     <script type="module" src="/wasm/euclid.js"></script>
     <script src="/module.js"></script>
     <div id="app"></div>

diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -1,4 +1,9 @@
 let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ())
+@val external document: 'a = "document"
+@send external setAttribute: (Dom.element, string, string) => unit = "setAttribute"
+@send external remove: (Dom.element, unit) => unit = "remove"
+@scope(("document", "body"))
+external appendChild: Dom.element => unit = "appendChild"
 
 module SDKConfiguarationFields = {
   open MerchantAccountUtils
@@ -94,6 +99,7 @@ let make = () => {
   let (initialValues, setInitialValues) = React.useState(_ =>
     defaultBusinessProfile->SDKPaymentUtils.initialValueForForm
   )
+
   React.useEffect1(() => {
     let paymentIntentOptional = filtersFromUrl->Js.Dict.get("payment_intent_client_secret")
     if paymentIntentOptional->Belt.Option.isSome {
@@ -128,6 +134,17 @@ let make = () => {
     Js.Nullable.null->Promise.resolve
   }
 
+  React.useEffect0(() => {
+    let sdkBaseUrl = switch HSwitchGlobalVars.hostType {
+    | Live => "https://checkout.hyperswitch.io/v0/HyperLoader.js"
+    | _ => "https://beta.hyperswitch.io/v1/HyperLoader.js"
+    }
+    let script = document->DOMUtils.createElement("script")
+    script->setAttribute("src", sdkBaseUrl)
+    appendChild(script)
+    Some(_ => script->remove())
+  })
+
   <>
     <BreadCrumbNavigation
       path=[{title: "Home", link: `/home`}] currentPageTitle="Explore Demo Checkout Experience"