> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Billing SDK

> Reactコンポーネント、CLIツール、フルスタック統合を備えた現代のWebアプリケーション向けの完全な請求インフラストラクチャ

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/32RVbEllEi0" title="Billing SDK | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

Billing SDKは、現代のWebアプリケーション向けの完全な請求インフラストラクチャを提供する包括的なオープンソースソリューションです。Reactコンポーネント、CLIツール、およびDodo Paymentsとの複数のフレームワークに対するフルスタック統合サポートが含まれています。

## 概要

Billing SDKは次の機能を提供します：

* **Reactコンポーネント**：Reactアプリケーション用の事前構築されたカスタマイズ可能な請求コンポーネント
* **CLIツール**：プロジェクトの初期化とコンポーネント管理のためのコマンドラインインターフェース
* **フレームワークサポート**：Next.js、Express.js、Hono、Fastify、Reactとの統合
* **決済プロバイダー**：Dodo Paymentsとの完全統合

## クイックスタート

数分でBilling SDKを始めましょう：

<Steps>
  <Step title="Install the CLI">
    npx を使用してインストールせずに CLI を実行します:

    ```bash theme={null}
    npx @billingsdk/cli --help
    ```

    または、頻繁に使用するためにグローバルにインストールします：

    ```bash theme={null}
    npm install -g @billingsdk/cli
    ```
  </Step>

  <Step title="Initialize a Project">
    対話型セットアップを実行して新しい請求プロジェクトを作成します:

    ```bash theme={null}
    npx @billingsdk/cli init
    ```

    次を選択するように求められます:

    * お好みのフレームワーク (Next.js、Express.js、Hono、Fastify、React)
    * ご利用の支払いプロバイダー (Dodo Payments)
  </Step>

  <Step title="Add Components">
    個別の請求コンポーネントをプロジェクトに追加します:

    ```bash theme={null}
    npx @billingsdk/cli add pricing-table-one
    npx @billingsdk/cli add subscription-management
    ```
  </Step>
</Steps>

## サポートされているフレームワーク

Billing SDKは、Dodo Paymentsとの包括的な統合を備えた複数のフレームワークをサポートしています：

| フレームワーク    | Dodo Payments |
| ---------- | ------------- |
| Next.js    | ✅ はい          |
| Express.js | ✅ はい          |
| Hono       | ✅ はい          |
| React      | ✅ はい          |
| Fastify    | ✅ はい          |

## CLIコマンド

### `@billingsdk/cli init`

フレームワークの設定、Dodo Paymentsの統合、および必須の依存関係を含む完全なセットアップで新しい請求プロジェクトを初期化します。

**何をするか：**

1. **フレームワークの選択**：お好みのフレームワークを選択します
2. **テンプレートのインストール**：Dodo Payments統合を含むフレームワーク固有のテンプレートをダウンロードしてインストールします
3. **依存関係の管理**：必要な依存関係を自動的にインストールします
4. **ファイル生成**：必要な設定ファイルとボイラープレートコードを作成します

**例：**

```bash theme={null}
npx @billingsdk/cli init
```

### `@billingsdk/cli add`

shadcn/uiレジストリシステムを使用して、既存のプロジェクトに個別の請求コンポーネントを追加します。

**例：**

```bash theme={null}
# Add a pricing table
npx @billingsdk/cli add pricing-table-one

# Add subscription management
npx @billingsdk/cli add subscription-management

# Add usage monitoring
npx @billingsdk/cli add usage-meter-circle
```

**何が起こるか：**

1. コンポーネント設定をレジストリからダウンロードします
2. コンポーネントファイルを `components/billingsdk/` ディレクトリにインストールします
3. 必要に応じてプロジェクト設定を更新します
4. 追加の依存関係をインストールします

## 生成されたファイル構造

`init` を実行した後、次の完全なプロジェクト構成が得られます:

* **APIルート**：チェックアウト、顧客、製品、サブスクリプション、およびWebhookのための包括的なエンドポイント
* **フック**：請求操作のためのReactフック（React/Next.jsを使用している場合）
* **ライブラリファイル**：決済プロバイダーのクライアント初期化とユーティリティ
* **環境設定**：環境変数ファイルの例

### Next.jsの例構造

```
your-project/
├── app/api/
│   └── (dodopayments)/
│       ├── checkout/route.ts
│       ├── customer/route.ts
│       ├── customer/payments/route.ts
│       ├── customer/subscriptions/route.ts
│       ├── product/route.ts
│       ├── products/route.ts
│       └── webhook/route.ts
├── hooks/
│   └── useBilling.ts
├── lib/
│   └── dodopayments.ts
└── .env.example
```

## 環境設定

初期化後に環境変数を設定します：

```bash theme={null}
# DodoPayments
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_ENVIRONMENT=test_mode
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_key_here

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

<Warning>
  常に API キーを環境変数で安全に保管してください。バージョン管理には絶対にコミットしないでください。
</Warning>

## 利用可能なコンポーネント

Billing SDKは、包括的なReactコンポーネントのコレクションを提供します：

* **価格表**：製品価格を表示するための複数のバリアント
* **サブスクリプション管理**：顧客のサブスクリプションを管理するためのコンポーネント
* **使用状況監視**：使用ベースの請求を追跡するための視覚コンポーネント
* **チェックアウトコンポーネント**：事前構築されたチェックアウトフロー
* **顧客ポータル**：顧客自己サービス用のコンポーネント

## オープンソース

Billing SDKはオープンソースの原則に基づいて構築されています：

* 🔍 **透明性**：コンポーネントの動作を完全に可視化
* 🤝 **コミュニティ**：開発者によって、開発者のために構築
* 🔒 **セキュリティ**：オープンコードはピアレビューによるより良いセキュリティを意味します
* 📈 **イノベーション**：コミュニティの貢献による迅速な反復

<Info>
  Billing SDK は GNU 一般公衆利用許諾書 (GPL) の下でリリースされており、プロジェクトがオープンで無料な状態に保たれます。
</Info>

## ヘルプを得る

Billing SDKに関して支援が必要ですか？

* **GitHub Issues**： [問題を開く](https://github.com/dodopayments/billingsdk/issues)
* **ドキュメント**： [billingsdk.com/docs](https://billingsdk.com/docs)を訪問
* **LLMs完全ドキュメント**： [billingsdk.com/llms-full.txt](https://billingsdk.com/llms-full.txt)

## 貢献

私たちは貢献を歓迎します！詳細については、[貢献ガイド](https://billingsdk.com/docs/contribution-open-source)をご覧ください：

* バグの報告
* 機能のリクエスト
* プルリクエストの提出
* 新しいコンポーネントの追加
* ドキュメントの改善

## さらに学ぶ

<CardGroup cols={3}>
  <Card title="Full Documentation" icon="book" href="https://billingsdk.com/docs">
    例とベストプラクティスを含む Billing SDK の完全ガイド
  </Card>

  <Card title="CLI Reference" icon="terminal" href="https://billingsdk.com/docs/cli">
    すべてのコマンドとオプションに関する詳細な CLI ドキュメント
  </Card>

  <Card title="Component Library" icon="boxes-stacked" href="https://billingsdk.com/docs/components">
    ライブ例付きの利用可能なすべてのコンポーネントを参照
  </Card>
</CardGroup>