​
Prerequisites

Node.js

v20.15.0 or higher

React

Version 18 or 19

TypeScript

Recommended for better DX

​
Installation

Choose your preferred package manager: 
npm install @b3dotfun/sdk

​
Basic Setup

​
1. Provider Setup

Wrap your app with the B3Provider and AnyspendProvider to enable AnySpend functionality:
App.tsx
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">
      <AnyspendProvider>{/* Your app components */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

​
2. Environment Configuration

AnySpend automatically configures API endpoints based on the isMainnet parameter:
Endpoint: https://mainnet.anyspend.comUse this for production applications with real transactions.
If you’re using TypeScript, ensure your tsconfig.json includes these settings for optimal compatibility:
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

​
Verification

Create a simple test component to verify your setup works correctly:
TestComponent.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

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

​
Next Steps

Explore Components

Learn about available components for different payment scenarios

Learn about Hooks

Discover React hooks for building custom payment flows

See Examples

Browse real-world implementation examples

​
Troubleshooting