Saltar al contenido principal

​
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" partnerId="your-awesome-partner-id">
      <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 de producción con transacciones reales.

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

Si estás utilizando TypeScript, asegúrate de que tu tsconfig.json incluya estos ajustes 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 implementaciones del mundo real

​
Solución de Problemas

Asegúrate de haber instalado correctamente el SDK 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 alto en tu árbol de componentes, típicamente en tu componente principal de la App.
Si estás viendo errores de TypeScript, verifica que tu tsconfig.json incluya los ajustes recomendados arriba.