​
사전 요구 사항

Node.js

v20.15.0 이상

React

버전 18 또는 19

TypeScript

더 나은 DX를 위해 권장됨

​
설치

선호하는 패키지 매니저를 선택하세요: 
npm install @b3dotfun/sdk

​
기본 설정

​
1. Provider 설정

앱을 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+을 요구하며 이전 버전과 호환성 문제가 있을 수 있습니다.
주로 메인 App 컴포넌트에 B3Provider와 AnyspendProvider가 컴포넌트 트리 상단에 위치하도록 해야 합니다.
TypeScript 오류가 발생하는 경우, 위에 권장된 설정이 tsconfig.json에 포함되어 있는지 확인하세요.