Installation

Install the PayKit packages you need, configure TypeScript, and set up environment variables for your payment providers.

Prerequisites

Node.js >= 20.0.0
npm >= 11.0.0 (or the equivalent pnpm / yarn version)

Package Overview

Package	Description	Install When
`@squaredr/paykit`	Core SDK + all adapters (Stripe, Razorpay, etc.)	Always — required by every project
`@squaredr/paykit-js`	Vanilla JS/TS frontend SDK (headless)	Non-React frontends or custom checkout UIs
`@squaredr/paykit-react`	React components and hooks	React or Next.js frontends

Backend Installation

Install the core SDK alongside one or more provider adapters. Pick the command that matches your stack.

Stripe

Terminal

npm install @squaredr/paykit stripe

Razorpay

Terminal

npm install @squaredr/paykit razorpay

Both providers

Terminal

npm install @squaredr/paykit stripe razorpay

Adapters are built into the core package as subpath exports. Install the provider SDK (stripe, razorpay) as a peer dependency, then import the adapter from @squaredr/paykit/stripe or @squaredr/paykit/razorpay.

Frontend Installation

Choose the frontend package that matches your framework.

React / Next.js

Terminal

npm install @squaredr/paykit-react

Vanilla JS / TypeScript

Terminal

npm install @squaredr/paykit-js

TypeScript Configuration

All PayKit packages ship with full type declarations. Make sure your tsconfig.json uses the bundler module resolution so that subpath exports (like @squaredr/paykit/stripe and @squaredr/paykit/stripe/client) resolve correctly.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Environment Variables

Each provider adapter reads credentials from environment variables. Create a .env file (or .env.local in Next.js) at the root of your project.

Stripe

.env

STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=whsec_your_stripe_webhook_secret
NEXT_PUBLIC_STRIPE_PK=pk_test_your_stripe_publishable_key

Razorpay

.env

RAZORPAY_KEY_ID=rzp_test_your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret
RAZORPAY_WEBHOOK_SECRET=your_razorpay_webhook_secret

Security: Never commit .env files to version control. Add .env and .env.local to your .gitignore. In production, inject secrets via your hosting provider's environment variable settings (Vercel, Railway, AWS, etc.).

Next Steps

Everything is installed. Head to the Quick Start guide to create your first charge and collect a payment in under five minutes.

← PreviousIntroduction Next →Quick Start