Skip to main content

​
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
  • pnpm
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" partnerId="your-awesome-partner-id">
      <AnyspendProvider>{/* Your app components */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

​
2. Environment Configuration

  • Mainnet
  • Testnet
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

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.
Ensure you have B3Provider and AnyspendProvider placed high in your component tree, typically in your main App component.
If you’re seeing TypeScript errors, verify your tsconfig.json includes the recommended settings above.
⌘I