diff --git a/Hyperswitch-React-Demo-App/public/playgroundIndex.html b/Hyperswitch-React-Demo-App/public/playgroundIndex.html index a99aefed6..fd075e99e 100644 --- a/Hyperswitch-React-Demo-App/public/playgroundIndex.html +++ b/Hyperswitch-React-Demo-App/public/playgroundIndex.html @@ -1,29 +1,24 @@ - - - - - - - - - - + + + + + + + - - + - React Hyperswitch Payment Element - + React Hyperswitch Payment Element + - - - -
- + + + +
+ - - - + + + \ No newline at end of file diff --git a/Hyperswitch-React-Demo-App/server.js b/Hyperswitch-React-Demo-App/server.js index 490e1d5ff..92b8db3c9 100644 --- a/Hyperswitch-React-Demo-App/server.js +++ b/Hyperswitch-React-Demo-App/server.js @@ -20,6 +20,10 @@ 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({ @@ -27,9 +31,10 @@ app.get("/config", (req, res) => { }); }); -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 index 3a8b66b9a..1150000e0 100644 --- 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,7 +10,7 @@ function Payment() { useEffect(() => { Promise.all([ fetch(`${endPoint}/config`), - fetch(`${endPoint}/server`), + fetch(`${endPoint}/urls`), fetch(`${endPoint}/create-payment-intent`), ]) .then((responses) => { @@ -19,15 +18,31 @@ function Payment() { }) .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"); + }) + ); + }; }); }, []);