> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chipipay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Quick setup guide for gasless transactions with Chipi SDK in Next.js applications

> [!WARNING]
>
> Gasless transactions are only available in Starknet Mainnet.

## 1. Set up your Chipi Dashboard

Go to [dashboard.chipipay.com](https://dashboard.chipipay.com) and create an account. The dashboard quickstart will walk you through:

1. **Creating your project** — gives you your API keys (Public Key + Secret Key)
2. **Configuring authentication** — connects your auth provider's JWKS endpoint
3. **Copying your `.env` variables** — the dashboard shows the exact snippet to paste

> [!TIP]
>
> The dashboard detects your auth provider (Clerk, Firebase, etc.) and auto-configures the JWKS endpoint for you.

You'll need both keys for the next step:

* **Public Key** (`pk_prod_xxxx`) — used client-side
* **Secret Key** (`sk_prod_xxxx`) — used by the server-side `ChipiProvider`

## 2. Install the SDK

```bash npm theme={null}
npm install @chipi-stack/nextjs
```

```bash yarn theme={null}
yarn add @chipi-stack/nextjs
```

```bash pnpm theme={null}
pnpm add @chipi-stack/nextjs
```

## 3. Initialize the SDK

1. Add your **Public Key** to your environment variables.

```bash theme={null}
NEXT_PUBLIC_CHIPI_API_KEY=pk_prod_xxxx
CHIPI_SECRET_KEY=sk_prod_xxxx
```

2. In your `layout.tsx`, wrap your app with the `ChipiProvider` component as shown below:

```tsx theme={null}
// app/layout.tsx

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

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

## 4. Start Using the SDK

You're ready to use the SDK! We recommend starting with our **convenience hooks** that simplify common operations:

### useChipiWallet - Unified Wallet Management

```tsx theme={null}
import { useAuth } from "@clerk/nextjs";
import { useChipiWallet } from "@chipi-stack/nextjs";

function WalletComponent() {
  const { userId, getToken } = useAuth();

  const { wallet, hasWallet, formattedBalance, createWallet, isLoadingWallet } =
    useChipiWallet({
      externalUserId: userId,
      getBearerToken: getToken,
    });

  if (!hasWallet) {
    return (
      <button
        onClick={() => createWallet({ encryptKey: "1234" })}
      >
        Create Wallet
      </button>
    );
  }

  return <p>Balance: ${formattedBalance} USDC</p>;
}
```

> **[useChipiWallet Documentation](/sdk/nextjs/hooks/use-chipi-wallet)**
>
> Learn about all the options and return values

### useChipiSession - Gasless Session Keys (CHIPI wallets only)

```tsx theme={null}
import { useChipiWallet, useChipiSession } from "@chipi-stack/nextjs";

function GaslessTransactions() {
  const { wallet } = useChipiWallet({ ... });

  const {
    hasActiveSession,
    createSession,
    registerSession,
    executeWithSession,
  } = useChipiSession({
    wallet,
    encryptKey: pin,
    getBearerToken: getToken,
  });

  // Setup session once
  const handleSetup = async () => {
    await createSession();
    await registerSession();
  };

  // Execute transactions without owner signature
  const handleTransfer = async () => {
    await executeWithSession([{
      contractAddress: USDC_CONTRACT,
      entrypoint: "transfer",
      calldata: [recipient, amount, "0x0"],
    }]);
  };
}
```

> **[useChipiSession Documentation](/sdk/nextjs/hooks/use-chipi-session)**
>
> Learn about session key management

## 5. Next Steps

That's it! You should now have an initial working version of Chipi Pay integrated into your application. Explore more features:

* [All Available Hooks](/sdk/nextjs/hooks/use-create-wallet) - Complete hook reference
* [Session Keys](/sdk/nextjs/hooks/use-chipi-session) - Enable gasless UX
* [Buying Services](/sdk/nextjs/buying-services) - Accept crypto payments

Need help? Join our [Telegram Community](https://t.me/+e2qjHEOwImkyZDVh) to ask us anything on your mind.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.