docs: increase readme for try it local for demo playground (#835)

Co-authored-by: Marno Janetzky <[email protected]>
Co-authored-by: Pritish Budhiraja <[email protected]>

Hyperswitch-React-Demo-App/README.md

@@ -21,7 +21,26 @@ npm install
 npm start
 ```
 
-This will start the react server running on localhost:4242. Note that the
-backend server runs on localhost:5252, but the React UI will be available at
-localhost:4242. API requests to your backend are proxied by the
+This will start the react server running on localhost:5252. API requests to your backend are proxied by the
 create-react-app server using the `proxy` setting in `./package.json`.
+
+## Example config using our Sandbox URL
+```
+STATIC_DIR=./dist
+HYPERSWITCH_PUBLISHABLE_KEY=pk_snd_***                 # Replace with your publishable key
+HYPERSWITCH_SECRET_KEY=snd_***                         # Replace with your API key
+HYPERSWITCH_SERVER_URL=https://sandbox.hyperswitch.io  # Our Sandbox server is used
+HYPERSWITCH_CLIENT_URL=http://localhost:9050           # Your local running SDK
+SELF_SERVER_URL=http://localhost:5252                  # Your local running demo server
+PROFILE_ID=""
+```
+
+## Troubleshooting
+If your demo application is not working, you can check the following to hopefully find the issue.
+
+- Make sure you have configured the [.env](.env) file correctly.
+    - Publishable Key `HYPERSWITCH_PUBLISHABLE_KEY` and API Key `HYPERSWITCH_SECRET_KEY` belong to the server `HYPERSWITCH_SERVER_URL`. If you use our Sandbox URL, use publishable key and API key from the hyperswitch website. If you are using your self-hosted backend, use your locally created publishable key and API Key.
+    - The URL's must not have a slash at the end.
+- Check that you have opened the demo application on the correct port. The default should be [localhost:5252](http://localhost:5252). Check the [webpack.dev.js](./webpack.dev.js) file to see if it is different.
+- Make sure you have three terminal windows open and running. If you are running your local backend, it has to be one more.
+- Open your browser's development tools (F12 in most browsers) and check the network tab for failed rest calls and the console for errors. 

README.md

@@ -65,19 +65,20 @@ Ways to get started with Hyperswitch:
 
 ### 🛠️ Try it in Local
 
-    Before you start the local setup, you need to understand a few configs -
+    You will need to understand and configure a few configurations before starting the local setup. -
 
 - #### Env Configs for Demo App
 
   - **`HYPERSWITCH_PUBLISHABLE_KEY`:** The publishable key of your Hyperswitch account. This key will start with `pk_dev_` for local development, `pk_snd_` for sandbox, and `pk_prd_` for production.
 
-  - **`HYPERSWITCH_SECRET_KEY`:** The API key of your Hyperswitch account that is used to authenticate API requests from your merchant server. On the Hyperswitch Dashboard, locate the "Developers" section, then click on [API Keys](https://app.hyperswitch.io/developer-api-keys). Here, you can generate your API Key.
+  - **`HYPERSWITCH_SECRET_KEY`:** The API key of your Hyperswitch account that is used to authenticate API requests from your merchant server.
 
-  - **`HYPERSWITCH_SERVER_URL`:** The URL of your hosted Hyperswitch backend server. Alternatively, you can use our Sandbox URL (https://sandbox.hyperswitch.io) or specify your backend running locally (e.g., http://localhost:8080).
+  - **`HYPERSWITCH_SERVER_URL`:** The URL of the Hyperswitch backend server. You may use our Sandbox URL (https://sandbox.hyperswitch.io). To do this, go to the Hyperswitch Dashboard, find the "Developers" section, then click on [API Keys](https://app.hyperswitch.io/dashboard/developer-api-keys). Here you can generate an API key (`HYPERSWITCH_SECRET_KEY`) and copy your publishable key (`HYPERSWITCH_PUBLISHABLE_KEY`).<br>
+Alternatively, you can specify that your backend is running locally (e.g. http://localhost:8080). In this case, you will need to create the API key and publishable key locally. Read this [hyperswitch docs](https://github.com/juspay/hyperswitch/blob/main/docs/try_local_system.md) on how to do this.
 
-  - **`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).
+  - **`HYPERSWITCH_CLIENT_URL`:** The URL of your hosted Hyperswitch SDK (e.g. http://localhost:9050). You may also use our Sandbox URL (https://beta.hyperswitch.io/v1).
 
-  - **`SELF_SERVER_URL`:** The URL of the hosted server file for generating client-secret and for fetching urls & configs. (eg: http://localhost:9060/payments)
+  - **`SELF_SERVER_URL`:** The URL of the hosted server file for generating client-secret and for fetching urls & configs (eg: http://localhost:5252).
 
 - #### Env Configs for SDK
 
@@ -106,7 +107,7 @@ Ways to get started with Hyperswitch:
 
   ### Setup the repo
 
-  1. First install all the node modules by running the following command
+  1. First install all the node modules by running the following command.
 
      ```bash
      npm install
@@ -120,7 +121,7 @@ Ways to get started with Hyperswitch:
        npm run re:start
        ```
 
-     - On the second terminal, run the following command for starting the server.
+     - On the second terminal, run the following command for starting the SDK server (by default on http://localhost:9050).
 
        ```bash
          npm run start
@@ -136,7 +137,8 @@ Ways to get started with Hyperswitch:
      npm run start
      ```
 
-     This will open a demo app where you can test your payments.
+     Now you can launch the demo app on http://localhost:5252/ where you can test your payments.<br>
+     If you encounter any problems, please refer to the troubleshooting section of the [Hyperswitch-React-Demo-App Readme](./Hyperswitch-React-Demo-App/README.md#troubleshooting).
 
   > 💡 Alternatively, you can update `.env` file and use the commands
   > above