Billing SDK

​

概要

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

​

クイックスタート

npx @billingsdk/cli --help

npm install -g @billingsdk/cli

npx @billingsdk/cli init

npx @billingsdk/cli add pricing-table-one
npx @billingsdk/cli add subscription-management

​

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

​

CLIコマンド

​

@billingsdk/cli init

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

npx @billingsdk/cli init

​

@billingsdk/cli add

# 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. 追加の依存関係をインストールします

​

生成されたファイル構造

• 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

​

環境設定

# 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

​

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

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

​

オープンソース

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

​

ヘルプを得る

• GitHub Issues： 問題を開く
• ドキュメント： billingsdk.com/docsを訪問
• LLMs完全ドキュメント： billingsdk.com/llms-full.txt

​

貢献

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

​

さらに学ぶ