LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Introduction
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
      • 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
    • Exploration Guide
    • 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
  • Steps to Deploy Hyperswitch web client on AWS
  • What do you need to get started
  • Let's begin!
  • Next step:

Was this helpful?

  1. Hyperswitch open source
  2. Deploy on AWS
  3. Component-wise Deployment
  4. Deploy web client

Playground deployment for prototyping (optional)

Quickly deploy your web client playground and see it in action

Last updated 11 months ago

Was this helpful?

Explore the web client's full stack playground for rapid prototyping using a single script to experience the product before integrating it into your app. You can also test your deployment on cloud, CDN configurations, etc. with this demo playground, before deploying your app.

Please note that this deployment is just for the demo-playground. This is optional and does not replace the integration step. In order to go-live, please integrate the web client onto your app before the deployment of your app

Steps to Deploy Hyperswitch web client on AWS

What do you need to get started

  • An AWS account (you can create an account if you do not have one)

Let's begin!

Note

You can directly start from if you have installed and configured AWS CLI

Step 1 - Install or Update the AWS CLI

Run this on your terminal
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Confirm the installation with the following command

Verify AWS CLI is installed
aws --version

aws-cli/2.10.0 Python/3.11.2 Linux/4.14.133-113.105.amzn2.x86_64 botocore/2.4.5 --> expected response

Run this on your terminal
curl "https://awscli.amazonaws.com/awscli-exe-linux-aarch64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Confirm the installation with the following command

Verify AWS CLI is installed
aws --version

aws-cli/2.10.0 Python/3.11.2 Linux/4.14.133-113.105.amzn2.x86_64 botocore/2.4.5 --> expected response

Run this on your terminal
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /

To verify that the shell can find and run the aws command in your $PATH, use the following commands

Verify AWS CLI is installed
which aws

/usr/local/bin/aws --> expected response

Step 2 - Configure the AWS CLI

For this step you would need the following from you AWS account

  1. Access key ID

  2. Secret Access Key

Once you have the keys run the below command

export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

Step 3 - Setup Hyperswitch web client playground

The playground can help you get a look and feel of your checkout page and can be used for quickly prototyping your changes. The React Demo App in hyperswitch-web setups the playground for you-> which is a fullstack application. We ensure that the secret key stays in the server side and the publishable key stays in the client side, we insist you do the same for your application when you move to a Production ready setup

You can now deploy the Hyperswitch web client application by running the below command in the same terminal session

Takes around 10-15 min to execute successfully

curl https://raw.githubusercontent.com/juspay/hyperswitch-web/main/aws/hyperswitch_web_aws_setup.sh | bash

On running the above command, you will get an option to configure the following:

Mandatory:

  1. Publishable Key - This is a public key that resides on your client side for authentication

  2. Secret Key - This is the API key which should only be restricted to your app server

Optional:

  1. URL where you have hosted Hyperswitch Backend - The base URL where you have hosted the app server. If not provided, this will default to https://sandbox.hyperswitch.io

  2. URL where you have hosted Hyperswitch Client SDK - This is the HyperLoader.js path (for e.g. https://{domain}.s3.amazonaws.com/{path}). If not provided, this will default to https://beta.hyperswitch.io/v1

  3. AWS Region - This is the AWS region where you will host you web client. If not provided, it will default to us-east-2.

Depending on the API version and changes made to the web client, the web client may or may not be compatible with the SaaS app server.

Once the script is executed, you will receive a Public IP as the response (e.g. http://34.207.75.225). This IP is the base URL for accessing the web client playground.

That's it! Hyperswitch web client should be up and running on your AWS account

Verify the application by opening this public IP in a web browser. Sometimes AWS can take upto 5 mins to initiate the EC2 instance.

Clean Up

If you want to delete the application from your account simply run the below clean up script

curl https://raw.githubusercontent.com/juspay/hyperswitch-web/main/aws/hyperswitch_web_cleanup_setup.sh | bash

Troubleshooting/ FAQs
  • I cannot see anything on myPublicIP or I get 404 Page not Found on this URL Please check your AWS EC2 details and make sure that the EC2 is created and has all the permissions required to run the server and create security groups. Post this, re-run the script to do a re-deployment.

  • AWS is throwing many errors while running the script Please ensure you have the relevant permissions to create and push on your AWS cloud. Also, ensure that there are no limits/ restrictions set to prevent cloud hosting.

Next step:

For more information,

You can create or manage your access keys from the Security Credentials tab inside your AWS Console. For more information,

You will either get these keys as an output when you host the app server, or for quick prototyping, you can create a new Hyperswitch sandbox account and get started.

You need JQ installed for this. For more information,

click here
click here
here
click here
Account setup
here
Step 3