Introduction

PayKit is a unified, type-safe payment SDK for Node.js and the browser. One API for Stripe, Razorpay, PayPal, and more — write your payment logic once and swap providers without changing a single line of business code.

Two-Part Architecture

PayKit is built around two complementary layers that work together to cover the full payment lifecycle:

Server adapters — handle charge creation, refunds, and webhook verification on your backend. Each adapter wraps a provider's native SDK and maps its responses into PayKit's unified types.
Frontend SDKs — provide headless utilities and pre-built React components for collecting payment details in the browser. They load only the client-safe code needed to confirm a payment, keeping your bundle lean and your secrets off the client.

Package Overview

Package	Description
`@squaredr/paykit`	Core SDK + all adapters via subpath exports (`/stripe`, `/razorpay`, etc.)
`@squaredr/paykit-js`	Vanilla JS/TS frontend SDK (headless)
`@squaredr/paykit-react`	React components and hooks

Quick Install

Terminal

npm install @squaredr/paykit stripe

Minimal Example

Create a charge on the server and confirm it on the client with just a few lines of code.

Backend: Create a charge

server/checkout.ts

import { PayKit } from '@squaredr/paykit'
import { StripeAdapter } from '@squaredr/paykit/stripe'

const paykit = new PayKit({
  adapter: new StripeAdapter({
    secretKey: process.env.STRIPE_SECRET_KEY!,
  }),
})

const charge = await paykit.charges.create({
  amount: 5000,       // $50.00
  currency: 'usd',
  metadata: { orderId: 'order_abc123' },
})

// Send charge.clientSecret to the frontend
console.log(charge.clientSecret)

Frontend: React checkout

app/checkout/page.tsx

'use client'

import { PayKitProvider, CheckoutForm } from '@squaredr/paykit-react'
import { StripeClientAdapter } from '@squaredr/paykit/stripe/client'

const stripe = new StripeClientAdapter({
  publishableKey: process.env.NEXT_PUBLIC_STRIPE_PK!,
})

export default function CheckoutPage() {
  return (
    <PayKitProvider adapter={stripe} clientSecret={clientSecret}>
      <CheckoutForm
        onSuccess={(result) => console.log('Paid:', result.id)}
        onError={(err) => console.error(err.message)}
      />
    </PayKitProvider>
  )
}

When to Use PayKit vs Provider SDKs Directly

If your application only ever needs a single payment provider and you are comfortable coupling your codebase to that provider's API, using the provider SDK directly is perfectly fine. PayKit shines when you want a single, type-safe abstraction that lets you support multiple providers, swap them at runtime, or test payment flows without hitting external APIs. It also saves you from learning each provider's unique webhook format — PayKit normalises them all into one consistent shape.

Next Steps

Head to Installation to set up your project, or jump straight to the Quick Start guide to start accepting payments in five minutes.

Next →Installation