Skip to main content
Gasless transactions are only available in Starknet Mainnet.
1

Set up your Chipi Dashboard

Go to 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
2

Install the SDK

npm install @chipi-stack/nextjs
3

Initialize the SDK

  1. Add your Public Key to your environment variables.
NEXT_PUBLIC_CHIPI_API_KEY=pk_prod_xxxx
CHIPI_SECRET_KEY=sk_prod_xxxx
  1. In your layout.tsx, wrap your app with the ChipiProvider component as shown below:
// 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

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

Learn about all the options and return values

​
useChipiSession - Gasless Session Keys (CHIPI wallets only)

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

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:Need help? Join our Telegram Community to ask us anything on your mind.