> ## 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 React applications

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

## 1. Configure your Authentication

You'll need to [add the JWKS Endpoint](https://dashboard.chipipay.com/configure/jwks-endpoint) from your auth provider to authenticate gasless transactions.

> [!TIP]
>
> With this JWKS Endpoint setup, you can now run secure code in your frontend
> using a rotating JWT token.

### Getting your JWKS Endpoint

For these common auth providers, you can get your JWKS Endpoint like this:

**Clerk**

1. Go to your [API Keys](https://dashboard.clerk.com/last-active?path=api-keys)

2. Copy your **Jwks Url** and paste it into the JWKS Endpoint field in your Chipi Dashboard.

**Firebase**

See our tutorial on how to set up Chipi with [Firebase](/sdk/react/gasless-firebase-setup).

## 2. Get your Public Key

Now go to your [Api Keys](https://dashboard.chipipay.com/configure/api-keys) and click on your project.

Which will give you access to your **Public Key** (`pk_prod_xxxx`). Keep this handy as you'll need it to initialize the SDK.

> [!NOTE]
>
> You won't need the Secret Key (`sk_prod_xxxx`) for now.

## 3. Install the SDK

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

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

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

## 4. Initialize the SDK

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

```bash theme={null}
# Vite uses VITE_ prefix for environment variables
VITE_CHIPI_API_KEY=pk_prod_xxxx
```

2. In your main `App.tsx` or `index.tsx`, wrap your app with the `ChipiProvider` component as shown below:

```tsx theme={null}
// App.tsx

import { ChipiProvider } from "@chipi-stack/chipi-react";
const API_PUBLIC_KEY = process.env.VITE_CHIPI_API_KEY;
if (!API_PUBLIC_KEY) throw new Error("API_PUBLIC_KEY is not set");

export default function App() {
  // ...
  return (
    <ChipiProvider
      config={{
        apiPublicKey: API_PUBLIC_KEY,
      }}
    >
      <Stack />;
    </ChipiProvider>
  );
}

```

## 5. 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 { useChipiWallet } from "@chipi-stack/chipi-react";

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

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

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

> **[useChipiWallet Documentation](/sdk/react/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/chipi-react";

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/react/hooks/use-chipi-session)**
>
> Learn about session key management

## 6. 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/react/hooks/use-create-wallet) - Complete hook reference
* [Session Keys](/sdk/react/hooks/use-chipi-session) - Enable gasless UX
* [Buying Services](/sdk/react/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.