​
Prerrequisitos

Node.js

v20.15.0 o superior

React

Versión 18 o 19

TypeScript

Recomendado para una mejor DX

​
Instalación

Elige tu gestor de paquetes preferido: 
npm install @b3dotfun/sdk

​
Configuración Básica

​
1. Configuración del Proveedor

Envuelve tu aplicación con B3Provider y AnyspendProvider para habilitar la funcionalidad de AnySpend:
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>{/* Tus componentes de la aplicación */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

​
2. Configuración del Entorno

Endpoint: https://mainnet.anyspend.comUsa esto para aplicaciones en producción con transacciones reales.

​
3. Configuración de TypeScript (Opcional pero Recomendado)

Si estás usando TypeScript, asegúrate de que tu tsconfig.json incluya estas configuraciones para una compatibilidad óptima:
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

​
Verificación

Crea un componente de prueba simple para verificar que tu configuración funciona correctamente:
TestComponent.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

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

​
Próximos Pasos

Explorar Componentes

Aprende sobre los componentes disponibles para diferentes escenarios de pago

Aprender sobre Hooks

Descubre hooks de React para construir flujos de pago personalizados

Ver Ejemplos

Explora ejemplos de implementación del mundo real

​
Solución de Problemas

Asegúrate de haber instalado el SDK correctamente e importado el archivo CSS. El SDK requiere React 18+ y puede tener problemas de compatibilidad con versiones anteriores.
Asegúrate de tener B3Provider y AnyspendProvider colocados en lo alto de tu árbol de componentes, típicamente en tu componente principal App.
Si estás viendo errores de TypeScript, verifica que tu tsconfig.json incluya las configuraciones recomendadas arriba.