​
Prasyarat

Node.js

v20.15.0 atau lebih tinggi

React

Versi 18 atau 19

TypeScript

Direkomendasikan untuk DX yang lebih baik

​
Instalasi

Pilih manajer paket yang Anda sukai: 
npm install @b3dotfun/sdk

​
Pengaturan Dasar

​
1. Pengaturan Provider

Bungkus aplikasi Anda dengan B3Provider dan AnyspendProvider untuk mengaktifkan fungsionalitas 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>{/* Komponen aplikasi Anda */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

​
2. Konfigurasi Lingkungan

Endpoint: https://mainnet.anyspend.comGunakan ini untuk aplikasi produksi dengan transaksi nyata.

​
3. Konfigurasi TypeScript (Opsional tapi Direkomendasikan)

Jika Anda menggunakan TypeScript, pastikan tsconfig.json Anda mencakup pengaturan ini untuk kompatibilitas optimal:
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

​
Verifikasi

Buat komponen tes sederhana untuk memverifikasi pengaturan Anda bekerja dengan benar:
TestComponent.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

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

​
Langkah Selanjutnya

Jelajahi Komponen

Pelajari tentang komponen yang tersedia untuk skenario pembayaran yang berbeda

Pelajari tentang Hooks

Temukan React hooks untuk membangun alur pembayaran kustom

Lihat Contoh

Telusuri contoh implementasi dunia nyata

​
Pemecahan Masalah

Pastikan Anda telah menginstal SDK dengan benar dan mengimpor file CSS. SDK memerlukan React 18+ dan mungkin memiliki masalah kompatibilitas dengan versi yang lebih lama.
Pastikan Anda memiliki B3Provider dan AnyspendProvider ditempatkan tinggi dalam pohon komponen Anda, biasanya dalam komponen App utama Anda.
Jika Anda melihat kesalahan TypeScript, verifikasi tsconfig.json Anda mencakup pengaturan yang direkomendasikan di atas.