​
Pré-requisitos

Node.js

v20.15.0 ou superior

React

Versão 18 ou 19

TypeScript

Recomendado para uma melhor DX

​
Instalação

Escolha seu gerenciador de pacotes preferido: 
npm install @b3dotfun/sdk

​
Configuração Básica

​
1. Configuração do Provider

Envolver seu aplicativo com o B3Provider e AnyspendProvider para habilitar a funcionalidade 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>{/* Seus componentes do aplicativo */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

​
2. Configuração do Ambiente

Endpoint: https://mainnet.anyspend.comUse isso para aplicações em produção com transações reais.

​
3. Configuração do TypeScript (Opcional mas Recomendado)

Se você está usando TypeScript, certifique-se de que seu tsconfig.json inclua essas configurações para compatibilidade ótima:
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

​
Verificação

Crie um componente de teste simples para verificar se sua configuração está funcionando corretamente:
TestComponent.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

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

​
Próximos Passos

Explore Componentes

Aprenda sobre os componentes disponíveis para diferentes cenários de pagamento

Saiba sobre Hooks

Descubra hooks React para construir fluxos de pagamento personalizados

Veja Exemplos

Navegue por exemplos de implementação do mundo real

​
Solução de Problemas

Certifique-se de que você instalou o SDK corretamente e importou o arquivo CSS. O SDK requer React 18+ e pode ter problemas de compatibilidade com versões anteriores.
Garanta que você tenha B3Provider e AnyspendProvider colocados no alto da sua árvore de componentes, tipicamente no seu componente principal App.
Se você está vendo erros de TypeScript, verifique se seu tsconfig.json inclui as configurações recomendadas acima.