From 107e914865a0b6a677663746689c6452287fae19 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Fri, 7 Jun 2024 12:29:12 +0530
Subject: [PATCH] feat: self serve url in env (#425)

---
 Hyperswitch-React-Demo-App/.env              | 1 +
 Hyperswitch-React-Demo-App/src/Payment.js    | 8 +++++---
 Hyperswitch-React-Demo-App/webpack.common.js | 6 ++----
 README.md                                    | 2 ++
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/Hyperswitch-React-Demo-App/.env b/Hyperswitch-React-Demo-App/.env
index d2c398adf..22dbd4bfb 100644
--- a/Hyperswitch-React-Demo-App/.env
+++ b/Hyperswitch-React-Demo-App/.env
@@ -3,4 +3,5 @@ HYPERSWITCH_PUBLISHABLE_KEY=
 HYPERSWITCH_SECRET_KEY=
 HYPERSWITCH_SERVER_URL=
 HYPERSWITCH_CLIENT_URL=
+SELF_SERVER_URL=
 
diff --git a/Hyperswitch-React-Demo-App/src/Payment.js b/Hyperswitch-React-Demo-App/src/Payment.js
index b2b104a2f..03a28b0db 100644
--- a/Hyperswitch-React-Demo-App/src/Payment.js
+++ b/Hyperswitch-React-Demo-App/src/Payment.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import { useEffect, useState } from "react";
 import React from "react";
 import { HyperElements } from "@juspay-tech/react-hyper-js";
@@ -8,10 +9,11 @@ function Payment() {
   const [clientSecret, setClientSecret] = useState("");
 
   useEffect(() => {
+    let url = SELF_SERVER_URL === "" ? ENDPOINT : SELF_SERVER_URL;
     Promise.all([
-      fetch(`${endPoint}/config`),
-      fetch(`${endPoint}/urls`),
-      fetch(`${endPoint}/create-payment-intent`),
+      fetch(`${url}/config`),
+      fetch(`${url}/urls`),
+      fetch(`${url}/create-payment-intent`),
     ])
       .then((responses) => {
         return Promise.all(responses.map((response) => response.json()));
diff --git a/Hyperswitch-React-Demo-App/webpack.common.js b/Hyperswitch-React-Demo-App/webpack.common.js
index 0826c5cfc..f3d25d3ee 100644
--- a/Hyperswitch-React-Demo-App/webpack.common.js
+++ b/Hyperswitch-React-Demo-App/webpack.common.js
@@ -47,11 +47,9 @@ module.exports = (endpoint, publicPath = "auto") => {
         template: "./public/playgroundIndex.html",
       }),
       new webpack.DefinePlugin({
-        endPoint:
-          typeof endpoint === "string"
-            ? JSON.stringify(endpoint)
-            : JSON.stringify(process.env.SELF_SERVER_URL),
+        ENDPOINT: JSON.stringify(endpoint),
         SCRIPT_SRC: JSON.stringify(process.env.HYPERSWITCH_CLIENT_URL),
+        SELF_SERVER_URL: JSON.stringify(process.env.SELF_SERVER_URL ?? ""),
       }),
       new BundleAnalyzerPlugin({
         analyzerMode: "static",
diff --git a/README.md b/README.md
index 77477bae7..e592c72dd 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,8 @@ Before you start the local setup, you will need an understanding of few keys -
 
 - **`HYPERSWITCH_CLIENT_URL`:** The URL of your hosted Hyperswitch SDK. You can also use our Sandbox URL (https://beta.hyperswitch.io/v1) or specify your app running locally (e.g., http://localhost:9050).
 
+- **`SELF_SERVER_URL`:** The URL of the hosted server file for generating client-secret and for fetching urls & configs. (eg: http://localhost:9060/payments)
+
 ### About Env Configs for SDK
 
 - **`ENV_BACKEND_URL`:** Sets the endpoint for all the APIs used within the SDK to interact with the backend service. If you are running your own backend service, you can configure and specify its endpoint here for local setups.