refactor: demo app changes for better readability

.github/CODEOWNERS

@@ -6,26 +6,14 @@ README.md @akash-c-k
 SECURITY.md @akash-c-k
 .gitignore @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja
 
-Hyperswitch-React-Demo-App/ @prafulkoppalkar @JeevaRamu0104 @PritishBudhiraja @seekshiva
-Hyperswitch-React-Demo-App/Dockerfile @JeevaRamu0104 @prafulkoppalkar
-Hyperswitch-React-Demo-App/Makefile @JeevaRamu0104 @prafulkoppalkar
-Hyperswitch-React-Demo-App/promptScript.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja
-Hyperswitch-React-Demo-App/webpack.common.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja
-Hyperswitch-React-Demo-App/webpack.dev.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja
+Hyperswitch-React-Demo-App/ @prafulkoppalkar @PritishBudhiraja @seekshiva @ArushKapoorJuspay
 
-.husky/ @prafulkoppalkar @PritishBudhiraja
-.github/ @prafulkoppalkar @PritishBudhiraja
+.husky/ @prafulkoppalkar @PritishBudhiraja @seekshiva
+.github/ @prafulkoppalkar @PritishBudhiraja @seekshiva
 
-aws/ @prafulkoppalkar
+aws/ @prafulkoppalkar @seekshiva
 
-webpack.dev.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja
-webpack.common.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja
+webpack.dev.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja @seekshiva
+webpack.common.js @prafulkoppalkar @ArushKapoorJuspay @PritishBudhiraja @seekshiva
 
-src/ @seekshiva
-src/orca-log-catcher @vsrivatsa-juspay @prafulkoppalkar
-src/orca-loader @prafulkoppalkar
-src/LoaderConroller.res @prafulkoppalkar @PritishBudhiraja
-src/Utilities @prafulkoppalkar @PritishBudhiraja
-src/libraries @prafulkoppalkar @PritishBudhiraja
-src/Hooks @prafulkoppalkar @PritishBudhiraja
-src/Payment.res @prafulkoppalkar @PritishBudhiraja
+src/ @seekshiva @PritishBudhiraja @ArushKapoorJuspay @prafulkoppalkar @vsrivatsa-juspay

Hyperswitch-React-Demo-App/server.js

@@ -1,33 +1,31 @@
 const fetch = require("node-fetch");
 const express = require("express");
-const app = express();
 const { resolve } = require("path");
+const dotenv = require("dotenv");
+const hyper = require("@juspay-tech/hyperswitch-node");
+dotenv.config({ path: "./.env" });
+
+const app = express();
+const PORT = 5252;
+
+const hyperswitch = hyper(process.env.HYPERSWITCH_SECRET_KEY);
+
+function getUrl(envVar, selfHostedValue) {
+  return process.env[envVar] === selfHostedValue ? "" : process.env[envVar];
+}
+
+const SERVER_URL = getUrl("HYPERSWITCH_SERVER_URL", "SELF_HOSTED_SERVER_URL");
+const CLIENT_URL = getUrl("HYPERSWITCH_CLIENT_URL", "SELF_HOSTED_CLIENT_URL");
 
-// Replace if using a different env file or config
-const env = require("dotenv").config({ path: "./.env" });
 app.use(express.static("./dist"));
 app.get("/", (req, res) => {
-  const path = resolve("./dist" + "/index.html");
+  const path = resolve("./dist/index.html");
   res.sendFile(path);
 });
 app.get("/completion", (req, res) => {
-  const path = resolve("./dist" + "/index.html");
+  const path = resolve("./dist/index.html");
   res.sendFile(path);
 });
-// replace the test api key with your hyperswitch api key
-const hyper = require("@juspay-tech/hyperswitch-node")(
-  process.env.HYPERSWITCH_SECRET_KEY
-);
-
-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,
@@ -41,109 +39,106 @@ app.get("/urls", (req, res) => {
   });
 });
 
-app.get("/create-payment-intent", async (req, res) => {
-  try {
-    var paymentIntent;
-    const request = {
-      currency: "USD",
-      amount: 2999,
-      order_details: [
-        {
-          product_name: "Apple iphone 15",
-          quantity: 1,
-          amount: 2999,
-        },
-      ],
-      confirm: false,
-      capture_method: "automatic",
-      authentication_type: "three_ds",
-      customer_id: "hyperswitch_sdk_demo_id",
-      email: "[email protected]",
-      description: "Hello this is description",
-      // allowed_payment_method_types:["sofort"],
-      shipping: {
-        address: {
-          state: "zsaasdas",
-          city: "Banglore",
-          country: "US",
-          line1: "sdsdfsdf",
-          line2: "hsgdbhd",
-          line3: "alsksoe",
-          zip: "571201",
-          first_name: "joseph",
-          last_name: "doe",
-        },
-        phone: {
-          number: "123456789",
-          country_code: "+1",
-        },
+function createPaymentRequest() {
+  return {
+    currency: "USD",
+    amount: 2999,
+    order_details: [
+      {
+        product_name: "Apple iPhone 15",
+        quantity: 1,
+        amount: 2999,
       },
-      connector_metadata: {
-        noon: {
-          order_category: "applepay",
-        },
+    ],
+    confirm: false,
+    capture_method: "automatic",
+    authentication_type: "three_ds",
+    customer_id: "hyperswitch_sdk_demo_id",
+    email: "[email protected]",
+    description: "Hello this is description",
+    shipping: {
+      address: {
+        line1: "1467",
+        line2: "Harrison Street",
+        line3: "Harrison Street",
+        city: "San Fransico",
+        state: "California",
+        zip: "94122",
+        country: "US",
+        first_name: "joseph",
+        last_name: "Doe",
       },
-      metadata: {
-        udf1: "value1",
-        new_customer: "true",
-        login_date: "2019-09-10T10:11:12Z",
+      phone: {
+        number: "8056594427",
+        country_code: "+91",
       },
-      billing: {
-        address: {
-          line1: "1467",
-          line2: "Harrison Street",
-          line3: "Harrison Street",
-          city: "San Fransico",
-          state: "California",
-          zip: "94122",
-          country: "US",
-          first_name: "joseph",
-          last_name: "Doe",
-        },
-        phone: {
-          number: "8056594427",
-          country_code: "+91",
-        },
+    },
+    metadata: {
+      udf1: "value1",
+      new_customer: "true",
+      login_date: "2019-09-10T10:11:12Z",
+    },
+    billing: {
+      address: {
+        line1: "1467",
+        line2: "Harrison Street",
+        line3: "Harrison Street",
+        city: "San Fransico",
+        state: "California",
+        zip: "94122",
+        country: "US",
+        first_name: "joseph",
+        last_name: "Doe",
       },
-    };
-    if (SERVER_URL) {
-      const url =
-        process.env.HYPERSWITCH_SERVER_URL_FOR_DEMO_APP ||
-        process.env.HYPERSWITCH_SERVER_URL;
-
-      const apiResponse = await fetch(`${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();
+      phone: {
+        number: "8056594427",
+        country_code: "+91",
+      },
+    },
+  };
+}
 
-      if (paymentIntent.error) {
-        return res.status(400).send({
-          error: paymentIntent.error,
-        });
-      }
-    } else {
-      paymentIntent = await hyper.paymentIntents.create(request);
-    }
+app.get("/create-payment-intent", async (_, res) => {
+  try {
+    const paymentRequest = createPaymentRequest();
+    const paymentIntent = await createPaymentIntent(paymentRequest);
 
-    // Send publishable key and PaymentIntent details to client
     res.send({
       clientSecret: paymentIntent.client_secret,
     });
   } catch (err) {
-    return res.status(400).send({
-      error: {
-        message: err.message,
-      },
+    res.status(400).send({
+      error: { message: err.message },
     });
   }
 });
 
-app.listen(5252, () =>
-  console.log(`Node server listening at http://localhost:5252`)
-);
+async function createPaymentIntent(request) {
+  if (SERVER_URL) {
+    const url =
+      process.env.HYPERSWITCH_SERVER_URL_FOR_DEMO_APP ||
+      process.env.HYPERSWITCH_SERVER_URL;
+    const apiResponse = await fetch(`${url}/payments`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "api-key": process.env.HYPERSWITCH_SECRET_KEY,
+      },
+      body: JSON.stringify(request),
+    });
+    const paymentIntent = await apiResponse.json();
+
+    if (paymentIntent.error) {
+      console.error("Error - ", paymentIntent.error);
+      throw new Error(paymentIntent?.error?.message ?? "Something went wrong.");
+    }
+    return paymentIntent;
+  } else {
+    return await hyperswitch?.paymentIntents?.create(request);
+  }
+}
+
+app.listen(PORT, () => {
+  console.log(`Node server listening at http://localhost:${PORT}`);
+});

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

@@ -5,14 +5,14 @@ import cap from "../public/assets/cap.png";
 function Cart() {
   return (
     <>
-      <div class="cart">
+      <div className="cart">
         <div className="titleContainer">
-          <div class="title">
+          <div className="title">
             {" "}
             <img className="logoImg" width="28px" src={logo} alt="" />{" "}
             Hyperswitch Playground App
           </div>
-          <div class="testMode">Test Mode</div>
+          <div className="testMode">Test Mode</div>
         </div>
         <div className="ordersummary">Order Summary(2) </div>
         <div className="items">