fix: HS-136: LoadHyper bugfix (#31)

juspay · Nov 20, 2023 · 4d2ac97 · 4d2ac97
1 parent 900634d
commit 4d2ac97
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 41 deletions.
diff --git a/Hyperswitch-React-Demo-App/public/playgroundIndex.html b/Hyperswitch-React-Demo-App/public/playgroundIndex.html
@@ -1,29 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <!-- <link rel="icon" href="/orca/elements/favicon.ico" /> -->
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
-    />
-    <meta name="theme-color" content="#000000" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700;800&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Qwitcher+Grypen:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
-
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <!-- <link rel="icon" href="/orca/elements/favicon.ico" /> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700;800&display=swap"
+    rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Qwitcher+Grypen:wght@400;700&display=swap"
+    rel="stylesheet" />
+
+  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
-    <!--
+  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -32,16 +27,16 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React Hyperswitch Payment Element</title>
-  </head>
+  <title>React Hyperswitch Payment Element</title>
+</head>
 
-  <body>
-    <script src="<%= SCRIPT_SRC%>/HyperLoader.js"></script>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="app"></div>
-    <script src="/app.js"></script>
+<body>
+  <!-- <script src="<%= SCRIPT_SRC%>/HyperLoader.js" difer></script> -->
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="app"></div>
+  <script src="/app.js"></script>
 
-    <!--
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -51,5 +46,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/Hyperswitch-React-Demo-App/server.js b/Hyperswitch-React-Demo-App/server.js
@@ -20,16 +20,21 @@ const SERVER_URL =
   process.env.HYPERSWITCH_SERVER_URL == "SELF_HOSTED_SERVER_URL"
     ? ""
     : process.env.HYPERSWITCH_SERVER_URL;
+const CLIENT_URL =
+  process.env.HYPERSWITCH_CLIENT_URL == "SELF_HOSTED_CLIENT_URL"
+    ? ""
+    : process.env.HYPERSWITCH_CLIENT_URL;
 
 app.get("/config", (req, res) => {
   res.send({
     publishableKey: process.env.HYPERSWITCH_PUBLISHABLE_KEY,
   });
 });
 
-app.get("/server", (req, res) => {
+app.get("/urls", (req, res) => {
   res.send({
     serverUrl: SERVER_URL,
+    clientUrl: CLIENT_URL,
   });
 });
 

diff --git a/Hyperswitch-React-Demo-App/src/Payment.js b/Hyperswitch-React-Demo-App/src/Payment.js
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import React from "react";
 import { HyperElements } from "@juspay-tech/react-hyper-js";
-import { loadHyper } from "@juspay-tech/hyper-js";
 import CheckoutForm from "./CheckoutForm";
 
 function Payment() {
@@ -11,23 +10,39 @@ function Payment() {
   useEffect(() => {
     Promise.all([
       fetch(`${endPoint}/config`),
-      fetch(`${endPoint}/server`),
+      fetch(`${endPoint}/urls`),
       fetch(`${endPoint}/create-payment-intent`),
     ])
       .then((responses) => {
         return Promise.all(responses.map((response) => response.json()));
       })
       .then((dataArray) => {
         const { publishableKey } = dataArray[0];
-        const { serverUrl } = dataArray[1];
+        const { serverUrl, clientUrl } = dataArray[1];
         const { clientSecret } = dataArray[2];
-        setHyperPromise(
-          loadHyper(publishableKey, { customBackendUrl: serverUrl })
-        );
         setClientSecret(clientSecret);
-      })
-      .catch((error) => {
-        console.error("Error:", error);
+        const script = document.createElement("script");
+        script.src = `${clientUrl}/HyperLoader.js`;
+        document.head.appendChild(script);
+        script.onload = () => {
+          setHyperPromise(
+            new Promise((resolve, _) => {
+              resolve(
+                window.Hyper(publishableKey, {
+                  customBackendUrl: serverUrl,
+                })
+              );
+            })
+          );
+        };
+
+        script.onerror = () => {
+          setHyperPromise(
+            new Promise((_, reject) => {
+              reject("Script could not be loaded");
+            })
+          );
+        };
       });
   }, []);