LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Exploration Guide
    • Overview
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
        • Hyperswitch Vault: Pass Through Proxy Payments
      • Intelligent Routing
      • Reconciliation
        • Getting Started with Recon
      • Alternate Payment Method Widgets
        • Hyperwidget Integration Guide
    • Roadmap - Q2 2025
      • Previous Roadmap - Q1 2025
      • Previous Roadmap - Q4 2024
      • Previous Roadmap - Q3 2024
      • Previous Roadmap - Q2 2024
      • Previous roadmap - Q1 2024
      • Previous roadmap - Q4 2023
  • Use-Cases
    • For SaaS Businesses
    • For B2B SaaS Businesses
    • For E-Commerce Businesses
    • For Marketplace/Platforms
  • Explore Hyperswitch
    • Payment Orchestration
      • Accept Payments
        • Connectors
          • Activate Connector on Hyperswitch
          • Try a Payment
          • Available Connectors
            • ACI
            • Adyen
            • Airwallex
            • Authorizedotnet
            • Bambora
            • Bank of America
            • Billwerk
            • Bluesnap
            • Braintree
            • Checkout
            • Coinbase
            • Cybersource
              • Apple Pay
              • Google Pay
            • dLocal
            • Fiserv
            • GlobalPayments
            • GoCardless
            • Klarna
            • Mollie
            • MultiSafepay
            • Nuvei
            • OpenNode
            • Paypal
            • PayU
            • Prophetpay
            • Rapyd
            • Shift4
            • Stripe
            • TrustPay
            • Volt
            • Worldline
            • Worldpay
            • Zen
            • Netcetera
              • Authenticating Payments via Netcetera Through HyperSwitch SDK
        • Setup Payment Methods
          • Cards
          • Wallets
            • Apple Pay
              • Web Domain
              • iOS Application
            • Google Pay
            • PayPal
          • Pay Later
          • Banks
            • Bank Debits
            • Bank Redirects
            • Bank Transfers
            • Open Banking
          • Crypto
          • Test Credentials
        • Payment Links
          • Configurations
          • Create Payment Links
          • Secure Payment Links
          • Setup Custom Domain
        • Save a Payment Method
        • Manual Capture
        • Incremental Authorization
        • Tokenization & Card Vault
          • Network Tokenisation
        • Supported Payment Workflows
        • Co-badged Cards
        • Webhooks
      • Process Payouts
        • Getting Started with Payouts
        • Using Saved Payment Methods
        • Smart Router for Payouts
        • Smart Retries in Payout
        • Payout Links
      • Smart Routing
        • Rule Based Routing
        • Volume Based Routing
        • Default Fallback Routing
      • Smart Retries
        • 3DS Step-up Retries
      • 3DS / Strong Customer Authentication
        • Setting up 3DS Decision Manager
        • Native 3DS Authentication
        • External Authentication for 3DS
      • Fraud & Risk Management
        • Activating FRM in Hyperswitch
        • Fraud Blocklist
      • Subscriptions
        • PG Agnostic Card Forwarding
        • Zero Amount Authorization
      • Split Payments
        • Stripe Split Payments
        • Adyen Split Payments
        • Xendit Split Payments
    • Checkout Experience
      • Customizable and Native Integrations
        • Web
          • Node And React
          • Customization
          • Error Codes
          • Node and HTML
          • Vanilla JS and REST API Integration
        • Android
          • Kotlin with Node Backend
          • Customization
          • Features
        • iOS
          • Swift with Node Backend
          • Customization
          • Features
        • React Native
          • React Native with Node Backend
          • Card Widget
          • Customization
        • Flutter
          • Flutter with Node Backend
          • Customization
        • Headless SDK
        • Server Setup
      • Click To Pay
        • Visa Click to Pay: V1 to V2 Migration
      • Payment Methods Management
    • Payment Operations
      • Managing Accounts and Profiles
        • ⚙️Control Centre Account setup
        • Hyperswitch Account Structure
      • Manage Your Team
      • Analytics & operations
        • Exporting payments data
      • Disputes / Chargebacks
      • Surcharge
        • Surcharge Setup guide
      • Multi-Tenancy
      • Data migration
        • Import data to Hyperswitch
        • Export data from Hyperswitch
    • Security and Compliance
      • PCI Compliance
      • Data Security
      • GDPR compliance
      • Identity and Access Management
    • E-commerce Platform Plugins by Hyperswitch
      • 🔌WooCommerce Plugin
        • Setup
        • Roadmap
        • Compatibility
        • FAQs
      • Saleor App
        • Setup
      • Automatic Tax calculation for Express Checkout wallets
  • Hyperswitch open source
    • Overview
      • Run Hyperswitch Locally Using Docker
        • Run Additional Services
      • Development Environment Setup
        • Backend
          • Configure and Run the Application
          • Try out APIs
        • SDK (Frontend)
        • Control Center
    • Deploy on AWS
      • Deploy on AWS using CloudFormation
      • Component-wise Deployment
        • Deploy app server
        • Deploy Control Center
        • Deploy web client
          • Production ready deployment
          • Integrate web client on your web app
          • Playground deployment for prototyping (optional)
        • Deploy Card Vault
          • Production ready deployment on AWS
          • Cloud setup guide
    • Deploy on Kubernetes
      • Deploy on GCP Using Helm Charts
      • Deploy on Azure Using Helm Charts
    • Account setup
      • Using Hyperswitch Control Center
      • Test a payment
      • Using postman
    • Troubleshooting
  • Testing Payments
  • Check list for Production
    • Going live
      • For SaaS Setup
      • For On-Prem Setup
        • Monitoring
        • PCI compliance
          • Get started
          • Completing the SAQ
        • Data Security
        • Updates
  • Learn more
    • API Reference
    • Connectors Supported
    • SDK Reference
      • React
      • JS
      • Custom Events
    • Hyperswitch architecture
      • Router
      • Storage
      • A Payments Switch with virtually zero overhead
    • Payment flows
    • Blog
  • Community Guidelines
Powered by GitBook

Compliance

  • Vulnerability Disclosure
  • PCI DSS 4.0
  • ISO 27001:2022

Community

  • Slack
  • Discord
  • GitHub Discussion
On this page
  • Setup Node
  • Clone the repo
  • Setup the repo

Was this helpful?

  1. Hyperswitch open source
  2. Overview
  3. Development Environment Setup

SDK (Frontend)

Last updated 1 month ago

Was this helpful?

This setup is meant for development. If you want a quick trial of Hyperswitch (without contributing), use .

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 (). To do this, go to the Hyperswitch Dashboard, find the "Developers" section, then click on . 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. ). In this case, you will need to create the API key and publishable key locally. Read this on how to do this.

    • HYPERSWITCH_CLIENT_URL: The URL of your hosted Hyperswitch SDK (e.g. ). You may also use our Sandbox URL ().

    • SELF_SERVER_URL: The URL of the hosted server file for generating client-secret and for fetching urls & configs (eg: ).

  • 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

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

On the second terminal, run the following command for starting the SDK server (by default on ).

Now you can launch the demo app on where you can test your payments. If you encounter any problems, please refer to the troubleshooting section of the .

this guide
https://sandbox.hyperswitch.io
API Keys
http://localhost:8080
hyperswitch docs
http://localhost:9050
https://beta.hyperswitch.io/v1
http://localhost:5252
here
http://localhost:9050
http://localhost:5252/
Hyperswitch-React-Demo-App Readme