chore: HS-154 Support for changing backend url in Demo App. (#7)

Hyperswitch-React-Demo-App/.env

@@ -1,3 +1,4 @@
 STATIC_DIR="./public"
 HYPERSWITCH_PUBLISHABLE_KEY="GET_THIS_FROM_DASHBOARD"
 HYPERSWITCH_SECRET_KEY="GET_THIS_FROM_DASHBOARD"
+HYPERSWITCH_SERVER_URL="SERVER_URL"

Hyperswitch-React-Demo-App/package.json

@@ -12,6 +12,7 @@
     "body-parser": "^1.19.0",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
+    "node-fetch": "2.6.1",
     "patch-package": "^8.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

Hyperswitch-React-Demo-App/server.js

@@ -1,3 +1,4 @@
+const fetch = require("node-fetch");
 const express = require("express");
 const app = express();
 const { resolve } = require("path");
@@ -15,18 +16,47 @@ const hyper = require("@juspay-tech/hyperswitch-node")(
   process.env.HYPERSWITCH_SECRET_KEY
 );
 
+const SERVER_URL = process.env.HYPERSWITCH_SERVER_URL == "SERVER_URL" ? "" : process.env.HYPERSWITCH_SERVER_URL;
+
 app.get("/config", (req, res) => {
   res.send({
     publishableKey: process.env.HYPERSWITCH_PUBLISHABLE_KEY,
   });
 });
 
-app.post("/create-payment-intent", async (req, res) => {
+app.get("/server", (req, res) => {
+  res.send({
+    serverUrl: SERVER_URL,
+  });
+});
+
+app.get("/create-payment-intent", async (req, res) => {
   try {
-    const paymentIntent = await hyper.paymentIntents.create({
+    var paymentIntent;
+    const request = {
       currency: "USD",
       amount: 2999,
-    });
+    }
+    if (SERVER_URL) {
+      const apiResponse = await fetch(`${process.env.HYPERSWITCH_SERVER_URL}/payments`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          'api-key': process.env.HYPERSWITCH_SECRET_KEY,
+        },
+        body: JSON.stringify(request),
+      });
+      paymentIntent = await apiResponse.json();
+
+      if (paymentIntent.error) {
+        return res.status(400).send({
+          error: paymentIntent.error,
+        });
+      }
+    } else {
+      paymentIntent = await hyper.paymentIntents.create(request);
+    }
 
     // Send publishable key and PaymentIntent details to client
     res.send({

Hyperswitch-React-Demo-App/src/CheckoutForm.js

@@ -28,13 +28,10 @@ export default function CheckoutForm() {
       },
     });
 
-    if (
-      error &&
-      (error.type === "card_error" || error.type === "validation_error")
-    ) {
+    if (error) {
       setMessage(error.message);
     } else {
-      setMessage("An unexpected error occured.");
+      window.location.href = `${window.location.origin}/completion`
     }
 
     setIsProcessing(false);

Hyperswitch-React-Demo-App/src/Completion.js

@@ -1,5 +1,7 @@
 function Completion(props) {
-  return <h1>Payment successful, Thank you! 🎉</h1>;
+  return window.location.href.includes("failed") ?
+    <h1>Payment failed, Please try again!</h1> :
+    <h1>Payment successful, Thank you! 🎉</h1>;
 }
 
 export default Completion;

Hyperswitch-React-Demo-App/src/Payment.js

@@ -9,20 +9,20 @@ function Payment() {
   const [clientSecret, setClientSecret] = useState("");
 
   useEffect(() => {
-    fetch("/config").then(async (r) => {
-      const { publishableKey } = await r.json();
-      setHyperPromise(loadHyper(publishableKey));
-    });
-  }, []);
-
-  useEffect(() => {
-    fetch("/create-payment-intent", {
-      method: "POST",
-      body: JSON.stringify({}),
-    }).then(async (result) => {
-      var { clientSecret } = await result.json();
-      setClientSecret(clientSecret);
-    });
+    Promise.all([fetch("/config"), fetch("/server"), fetch("/create-payment-intent")])
+      .then(responses => {
+        return Promise.all(responses.map(response => response.json()));
+      })
+      .then(dataArray => {
+        const { publishableKey } = dataArray[0];
+        const { serverUrl } = dataArray[1];
+        const { clientSecret } = dataArray[2];
+        setHyperPromise(loadHyper(publishableKey, { customBackendUrl: serverUrl }));
+        setClientSecret(clientSecret);
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
   }, []);
 
   return (

README.md

@@ -149,11 +149,9 @@ Try the steps below to get a feel of how quick the setup is:
 <a href="#Connect your Hyperswitch self hosted Server">
   <h2 id="Connect with you Hyperswitch Server">🔌Connect your Hyperswitch self hosted Server</h2>
 </a>
-Modify the backendEndPoint in /webpack.dev.js by adding the BE hosted url
 
-```
-let backendEndPoint ="HOSTED_URL"
-```
+Modify the `HYPERSWITCH_SERVER_URL` key in `.env file` by adding the BE hosted url
+
 
 <a href="#FAQs">
   <h2 id="FAQs">🤔 FAQs</h2>