Hyperswitch Payment Demo

A minimal demo app showing headless integration with the Hyperswitch Payment SDK using saved card CVC confirmation and full payment element flows.

Prerequisites

• Node.js 18+
• A Hyperswitch account with API keys

Setup

1. Clone and install

   git clone <repo-url>
   cd hyperswitch-demo
   npm install

2. Configure environment

   Copy the example env file and fill in your credentials:

   cp .env.example .env

   Variable	Description
   HYPERSWITCH_PUBLISHABLE_KEY	Your publishable key
   HYPERSWITCH_SECRET_KEY	Your secret key
   HYPERSWITCH_SERVER_URL	Hyperswitch server URL
   HYPERSWITCH_CLIENT_URL	Hyperswitch client URL
   PROFILE_ID	(Optional) Profile ID

3. Build and run

   npm run build
   npm run serve

   Open http://localhost:5252

4. Development (hot reload)

   npm run dev

Project Structure

src/
  components/PaymentModal.tsx   # Payment modal (CVC + Payment screens)
  App.tsx                       # Root component
  utils.ts                      # API helpers
  types.ts                      # Type definitions
  styles.css                    # Styles
  index.tsx                     # Entry point
server/
  index.js                      # Express backend

Flow

1. CVC Screen — Saved card last4 + CVC input, amount selector ($100/$150/$200), deposit button. Amount changes trigger updateIntent.
2. Payment Screen — Full PaymentElement with cards, Apple Pay, Google Pay.

License

MIT