feat: self serve url in env (#425)

Hyperswitch-React-Demo-App/.env

@@ -3,4 +3,5 @@ HYPERSWITCH_PUBLISHABLE_KEY=
 HYPERSWITCH_SECRET_KEY=
 HYPERSWITCH_SERVER_URL=
 HYPERSWITCH_CLIENT_URL=
+SELF_SERVER_URL=
 

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()));

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",

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.