​
先决条件

Node.js

v20.15.0 或更高版本

React

版本 18 或 19

TypeScript

推荐使用以获得更好的开发体验

​
安装

选择您偏好的包管理器： 
npm install @b3dotfun/sdk

​
基础设置

​
1. 提供者设置

使用 B3Provider 和 AnyspendProvider 包裹您的应用程序以启用 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>{/* 您的应用程序组件 */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

​
2. 环境配置

端点：https://mainnet.anyspend.com用于实际交易的生产应用程序。

​
3. TypeScript 配置（可选但推荐）

如果您使用 TypeScript，请确保您的 tsconfig.json 包含以下设置以获得最佳兼容性：
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

​
验证

创建一个简单的测试组件以验证您的设置是否正确：
TestComponent.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

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

​
下一步

探索组件

了解可用于不同支付场景的组件

了解 Hooks

发现用于构建自定义支付流程的 React hooks

查看示例

浏览真实世界的实现示例

​
故障排除

确保您已正确安装 SDK 并导入了 CSS 文件。SDK 需要 React 18+ 并且可能与旧版本不兼容。
确保您在组件树的高层，通常在您的主应用程序组件中放置了 B3Provider 和 AnyspendProvider。
如果您看到 TypeScript 错误，请验证您的 tsconfig.json 包含上面推荐的设置。