Next.js with Clerk

Getting Started

To get started with Chipi Pay in your Next.js application

npx create-next-app@latest my-chipi-app
cd my-chipi-app

If you get ERESOLVE peer dependency errors when installing Clerk, run npm install --legacy-peer-deps. This is a known Clerk + React 19 compatibility issue.

With Clerk, you can follow their Quickstart Guide to get started.

Install the Chipi SDK

First, install the required packages:

# Install Chipi Pay SDK
npm install @chipi-stack/nextjs

# Install Clerk
npm install @clerk/nextjs

Setup the Chipi SDK Provider

Create a .env file in your project root and add your API keys:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
CHIPI_SECRET_KEY=your_chipi_api_secret_key

Get your Chipi API keys from the Chipi Dashboard quickstart. Get your Clerk keys from the Clerk Dashboard.

Set up the Chipi Pay provider in your application:

// app/layout.tsx

import { ClerkProvider } from "@clerk/nextjs";
import { ChipiProvider } from "@chipi-stack/nextjs";

export default function RootLayout({children}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          <ChipiProvider>{children}</ChipiProvider>
        </ClerkProvider>
      </body>
    </html>
  );
}

Need help? Check out our Telegram Community for support and to connect with other developers.

Getting Started

Gasless

Next.js Guides

Pay With Crypto

SDK Hooks

Session Hooks

Server

MCP

Privacy

Next.js with Clerk

Getting Started

Install the Chipi SDK

Setup the Chipi SDK Provider