> ## 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
Gasless transactions are only available in Starknet Mainnet.
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
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`
```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
```
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 (
{children}
);
}
```
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 (
);
}
return
Balance: ${formattedBalance} USDC
;
}
```
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"],
}]);
};
}
```
Learn about session key management
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.