Set up Hyperswitch SDK (Frontend)

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.

  • 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. Here you can generate an API key (HYPERSWITCH_SECRET_KEY) and copy your publishable key (HYPERSWITCH_PUBLISHABLE_KEY). 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 on how to do this.

  • 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:5252).

• 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.

  • ENV_LOGGING_URL: Specifies a custom logging endpoint where logs generated by the SDK can be sent. This allows you to view and manage logs according to your requirements.

Setup Node

Check if your machine has node already installed by running the below command on your local machine.

node -v

If your machine does not have node installed in it, you can install it from here

Clone the repo

Clone the repository from Bitbucket and save in your folder.

git clone https://github.com/juspay/hyperswitch-web.git
cd hyperswitch-web

Setup the repo

1. First install all the node modules by running the following command.

   npm install

2. Once the installation is successful, you can open two terminals.

   • On the first terminal run the following command for generating the build:

     npm run re:start

   • On the second terminal, run the following command for starting the SDK server (by default on http://localhost:9050).

       npm run start

   Upon success, you should see a message Compiled successfully message on both of your terminals.

3. Now that the build is generated successfully, on a third terminal, launch the playground.

   cd Hyperswitch-React-Demo-App
   npm install
   npm run start

   Now you can launch the demo app on http://localhost:5252/ where you can test your payments. If you encounter any problems, please refer to the troubleshooting section of the Hyperswitch-React-Demo-App Readme.