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

# Installation & setup

> Install the SDK, set up providers, and verify everything works

<iframe class="w-full aspect-video rounded-xl mb-6" src="https://customer-gg6qs7nm5ue94t64.cloudflarestream.com/5b90adbe5372a15f4776bd796776aa2f/iframe?poster=https%3A%2F%2Fcustomer-gg6qs7nm5ue94t64.cloudflarestream.com%2F5b90adbe5372a15f4776bd796776aa2f%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D168%26height%3D600" title="AnySpend Setup" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

## Prerequisites

<CardGroup cols={3}>
  <Card title="Node.js" icon="node-js">
    v20.15.0 or higher
  </Card>

  <Card title="React" icon="react">
    Version 18 or 19
  </Card>

  <Card title="TypeScript" icon="code">
    Recommended for better DX
  </Card>
</CardGroup>

## Installation

Choose your preferred package manager:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @b3dotfun/sdk
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @b3dotfun/sdk
    ```
  </Tab>
</Tabs>

## Basic Setup

### 1. Provider Setup

Wrap your app with the `B3Provider` and `AnyspendProvider` to enable AnySpend functionality:

```tsx App.tsx icon=react theme={null}
import { AnyspendProvider } from "@b3dotfun/sdk/anyspend/react";
import { B3Provider } from "@b3dotfun/sdk/global-account/react";
import "@b3dotfun/sdk/index.css";

function App() {
  return (
    <B3Provider theme="light" environment="production" partnerId="your-awesome-partner-id">
      <AnyspendProvider>{/* Your app components */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;
```

### 2. Environment Configuration

<Tabs>
  <Tab title="Mainnet">
    **Endpoint**: `https://mainnet.anyspend.com`

    Use this for production applications with real transactions.
  </Tab>

  <Tab title="Testnet">
    **Endpoint**: `http://testnet.anyspend.com`

    Use this for development and testing with test tokens.

    Note: Testnet is currently not available.
  </Tab>
</Tabs>

### 3. TypeScript Configuration (Optional but Recommended)

<Note>
  If you're using TypeScript, ensure your `tsconfig.json` includes these settings for optimal compatibility:
</Note>

```json tsconfig.json icon=settings theme={null}
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}
```

## Verification

Create a simple test component to verify your setup works correctly:

```tsx TestComponent.tsx icon=test-tube lines theme={null}
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function TestComponent() {
  return <AnySpend />;
}
```

## Next Steps

<CardGroup cols={3}>
  <Card title="Explore Components" icon="puzzle-piece" href="/anyspend/components">
    Learn about available components for different payment scenarios
  </Card>

  <Card title="Learn about Hooks" icon="link" href="/anyspend/hooks">
    Discover React hooks for building custom payment flows
  </Card>

  <Card title="See Examples" icon="code" href="/anyspend/examples">
    Browse real-world implementation examples
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Import Errors">
    Make sure you've installed the SDK correctly and imported the CSS file. The SDK requires React 18+ and may have compatibility issues with older versions.
  </Accordion>

  <Accordion title="Provider Not Found">
    Ensure you have `B3Provider` and `AnyspendProvider` placed high in your component tree, typically in your main App component.
  </Accordion>

  <Accordion title="TypeScript Errors">
    If you're seeing TypeScript errors, verify your `tsconfig.json` includes the recommended settings above.
  </Accordion>
</AccordionGroup>