> ## 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.
</Warning>

<Steps>
  <Step title="Configure your Authentication" titleSize="h2">
    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.
    </Tip>

    ### Getting your JWKS Endpoint

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

    <Tabs>
      <Tab title="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.
      </Tab>

      <Tab title="Firebase">
        See our tutorial on how to set up Chipi with [Firebase](/sdk/react/gasless-firebase-setup).
      </Tab>
    </Tabs>
  </Step>

  <Step title="Get your Public Key" titleSize="h2">
    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.

    <Info>
      You won't need the Secret Key (`sk_prod_xxxx`) for now.
    </Info>
  </Step>

  <Step title="Install the SDK" titleSize="h2">
    <CodeGroup>
      ```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
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK" titleSize="h2">
    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>
      );
    }

    ```
  </Step>

  <Step title="Start Using the SDK" titleSize="h2">
    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>;
    }
    ```

    <Card title="useChipiWallet Documentation" icon="wallet" href="/sdk/react/hooks/use-chipi-wallet">
      Learn about all the options and return values
    </Card>

    ### 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"],
        }]);
      };
    }
    ```

    <Card title="useChipiSession Documentation" icon="key" href="/sdk/react/hooks/use-chipi-session">
      Learn about session key management
    </Card>
  </Step>

  <Step title="Next Steps" titleSize="h2">
    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.
  </Step>
</Steps>