座席ベースの価格設定とアドオンおよび支払いリンク

このチュートリアルでは、Dodo Payments のアドオンを使用して、シートベースの料金体系を実装する方法を説明します。追加シート用のアドオンを含むサブスクリプション商品を作成し、カスタムアドオン数量を指定した支払いリンクを生成します。

このチュートリアルでは Node.js と Express を使用します。コードは使用するフレームワーク（Next.js、React、Vue など）に合わせて変更でき、UI もアプリケーションに合わせてカスタマイズできます。

このチュートリアルの終わりまでに、次のことができるようになります：

座席ベースの価格設定を持つサブスクリプション製品を作成する
追加の座席用のアドオンを設定する
カスタムアドオン数量を持つ支払いリンクを生成する
動的な座席数を持つチェックアウトセッションを処理する

何を作成するか

座席ベースの価格モデルを作成しましょう：

基本プラン: 最大 5 名のチームメンバーまで $49/月
シートアドオン: 追加シート 1 つにつき $2/月
支払いリンク: カスタムシート数量に対応した動的なチェックアウト

始める前に、以下を確認してください：

Dodo Paymentsアカウント
TypeScript/Node.jsの基本的な知識

ステップ1: 座席アドオンを作成する

追加シートを表すアドオンを作成します。このアドオンを基本サブスクリプションに紐付けることで、顧客は追加シートを購入できるようになります。

作成するもの: シート 1 つにつき $2/月で、任意の基本サブスクリプションに追加できるアドオン。

Navigate to Add-Ons

Dodo PaymentsのダッシュボードでProductsセクションにとどまります
Add-Onsタブをクリック
Create Add-Onをクリック

これでアドオン作成フォームが開きます。

Enter add-on details

座席アドオンには次の値を入力します：Add-On Name：Additional Team SeatDescription：Add extra team members to your workspace with full access to all featuresPrice：→ 2.00 を入力通貨: 基本サブスクリプションの通貨と一致する必要があります税カテゴリ: 製品に適切なカテゴリを選択します。

Save your add-on

すべての設定を確認します。
- 名前: 追加チームシート
- 価格: $2.00/月
アドオンを作成 をクリックします。

アドオンが作成されました！ あなたの座席アドオンは、サブスクリプションに追加できるようになりました。

ステップ2: 基本サブスクリプション製品を作成する

5 名のチームメンバーを含む基本サブスクリプション商品を作成します。これがシートベースの料金モデルの基盤になります。

Navigate to Products

Dodo Paymentsダッシュボードにログイン
左側のサイドバーでProductsをクリック
Create Productボタンをクリック
製品タイプとしてSubscriptionを選択

基本サブスクリプションの設定を行うフォームが表示されるはずです。

Fill in the subscription details

ここで基本プランの詳細を入力します：Product Name：MotionDescription：Where your team's documentation lives.Recurring Price：→ 49.00 を入力Billing Cycle：→ Monthly を選択Currency：希望する通貨を選択（例：USD）

ステップ3: アドオンをサブスクリプションに接続する

顧客がチェックアウト時に追加シートを購入できるよう、シートアドオンを基本サブスクリプションに関連付けます。

Attach the seat add-on

アドオンセクションまでスクロールします
アドオンを追加をクリックします
ドロップダウンから座席アドオンを選択します
サブスクリプション設定に表示されていることを確認します

Save subscription changes

サブスクリプションの設定全体を確認します：
- 基本プラン：$49/月、5席
- アドオン：追加の1席ごとに$2/月
変更を保存をクリックします

シートベースの料金体系が設定されました！ 顧客は基本プランを購入し、必要に応じてシートを追加できるようになりました。

Step 4: カスタムアドオン数量で支払いリンクを生成する

カスタムアドオン数量を指定した支払いリンクを生成する Express.js アプリケーションを作成します。これにより、任意の数の追加シートを含むチェックアウトセッションを動的に作成できます。

Set up your project

新しい Node.js プロジェクトを作成し、必要な依存関係をインストールします。

mkdir seat-based-pricing
cd seat-based-pricing
npm init -y
npm install dodopayments express dotenv
npm install -D @types/node @types/express typescript ts-node

tsconfig.json ファイルを作成します。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Create your environment file

Dodo Payments API key を含む .env ファイルを作成します。

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

API key をバージョン管理にコミットしないでください。.gitignore ファイルに .env を追加します。

Implement the checkout session creation

次のコードを含む src/server.ts ファイルを作成します。

// Add this new endpoint for dynamic seat quantities
import 'dotenv/config';
import DodoPayments from 'dodopayments';
import express, { Request, Response } from 'express';

const app = express();

// Initialize the Dodo Payments client
const client = new DodoPayments({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  environment: 'test_mode'
});

async function createCheckoutSession(seatCount: number) {
  try {
    const session = await client.checkoutSessions.create({
      // Products to sell - use IDs from your Dodo Payments dashboard
      product_cart: [
        {
          product_id: 'pdt_7Rl9OWT2Mz4wwUTKz74iZ', // Replace with your actual product ID
          quantity: 1,
          addons: [
            {
              addon_id: 'adn_eKQbNakKrivDpaxmI8wKI', // Replace with your actual addon ID
              quantity: seatCount
            }
          ]
        }
      ],
      
      // Pre-fill customer information to reduce friction
      customer: {
        email: 'steve@example.com',
        name: 'Steve Irwin',
      },
      // Where to redirect after successful payment
      return_url: 'https://example.com/checkout/success',
    });

    // Redirect your customer to this URL to complete payment
    console.log('Checkout URL:', session.checkout_url);
    console.log('Session ID:', session.session_id);
    
    return session;
    
  } catch (error) {
    console.error('Failed to create checkout session:', error);
    throw error;
  }
}

// Example usage in an Express.js route
app.post('/create-checkout/:seatCount', async (req: Request, res: Response) => {
  try {
    const seatCount = parseInt(req.params.seatCount);
    const session = await createCheckoutSession(seatCount);
    // Demo pricing from this tutorial: $49 base + $2 per additional seat
    res.json({ checkout_url: session.checkout_url, total_cost: 49 + seatCount * 2 });
  } catch (error) {
    res.status(500).json({ error: 'Failed to create checkout session' });
  }
});

// Add this line after your other middleware
app.use(express.static('public'));

// Add this route to serve the demo page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/../public/index.html');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Add a simple web interface

簡単なテスト用に public/index.html ファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>Seat-Based Pricing Demo</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
        .form-group { margin: 20px 0; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 4px; }
    </style>
</head>
<body>
    <h1>Seat-Based Pricing Demo</h1>
    <p>Generate checkout links with custom seat quantities:</p>
    
    <div class="form-group">
        <label for="seatCount">Number of Additional Seats:</label>
        <input type="number" id="seatCount" value="3" min="0" max="50">
    </div>
    
    <button onclick="createCheckout()">Generate Checkout Link</button>
    
    <div id="result" class="result" style="display: none;">
        <h3>Checkout Link Generated!</h3>
        <p><strong>Seat Count:</strong> <span id="seatCountDisplay"></span></p>
        <p><strong>Total Cost:</strong> $<span id="totalCost"></span>/month</p>
        <p><strong>Checkout URL:</strong></p>
        <a id="checkoutUrl" href="#" target="_blank">Click here to checkout</a>
    </div>

    <script>
        async function createCheckout() {
            const seatCount = document.getElementById('seatCount').value;
            
            try {
                const response = await fetch(`/create-checkout/${seatCount}`, {
                    method: 'POST'
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    document.getElementById('seatCountDisplay').textContent = seatCount;
                    document.getElementById('totalCost').textContent = data.total_cost;
                    document.getElementById('checkoutUrl').href = data.checkout_url;
                    document.getElementById('result').style.display = 'block';
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error creating checkout session');
            }
        }
    </script>
</body>
</html>

Web インターフェースが作成されました！ これで、さまざまなシート数量をテストできるシンプルな UI が用意できました。

Serve static files

HTML ファイルを提供するため、これを src/server.ts に追加します。

// Add this line after your other middleware
app.use(express.static('public'));

// Add this route to serve the demo page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/../public/index.html');
});

静的ファイルが設定されました！ http://localhost:3000 にアクセスしてデモインターフェースを確認してください。

Step 5: 実装をテストする

シートベースの料金体系の実装が正しく動作することを確認するため、テストします。

Start your server

正しい API key を含む .env ファイルがあることを確認します。
コード内の商品 ID とアドオン ID を、Dodo Payments ダッシュボードにある実際の値に更新します。
サーバーを起動します。

npx ts-node src/server.ts

サーバーが正常に起動し、「Server is running on port 3000」と表示されるはずです。

Test the web interface

ブラウザを開き、http://localhost:3000 に移動します。
シートベースの料金体系のデモインターフェースが表示されることを確認します。
さまざまなシート数量（0、3、10 など）を試します。
各数量で「Generate Checkout Link」をクリックします。
チェックアウト URL が正しく生成されることを確認します。

Test a checkout session

追加シート 3 つでチェックアウトリンクを生成します。
チェックアウト URL をクリックして Dodo Payments のチェックアウトを開きます。
チェックアウトに次の内容が表示されることを確認します。
- 基本プラン: $49/月
- 追加シート: 3 × 2 ドル = $6/月
テスト購入を完了します。

チェックアウトには正しい料金の内訳が表示され、購入を完了できるはずです。

Listen for webhooks and update your database

Dodo Payments からの webhook events をリッスンして、サブスクリプションとシートの変更をデータベースに同期します。Webhook は、顧客がチェックアウトを完了したとき、サブスクリプションを更新したとき、またはシート数を変更したときにバックエンドへ通知します。Webhook endpoint の設定とイベント処理の手順については、Dodo Payments の公式 webhooks ガイドを参照してください。

Dodo Payments Webhooks Documentation

サブスクリプションとシートを安全に管理するため、webhook events の受信と処理方法を確認できます。

トラブルシューティング

よくある問題と解決策:

Checkout creation failing

考えられる原因:

商品 ID またはアドオン ID が無効
API key に十分な権限がない
アドオンがサブスクリプションに正しく関連付けられていない
ネットワーク接続の問題

解決策:

Dodo Payments ダッシュボードに商品 ID とアドオン ID が存在することを確認します。
アドオンがサブスクリプションに正しく紐付けられていることを確認します。
API key に checkout session の作成権限があることを確認します。
簡単な GET request で API 接続をテストします。

おめでとうございます！シートベースの料金体系を実装しました

Dodo Payments を使用したシートベースの料金体系を正常に作成できました。今回達成した内容は次のとおりです。

Base Subscription

5 つのシートを含むサブスクリプション商品を $49/月で作成

Seat Add-ons

追加シート用のアドオンを、シート 1 つにつき $2/月で設定

Checkout

カスタムシート数量を指定してチェックアウトセッションを生成する API を構築

Web Interface

さまざまなシート数量をテストできるシンプルな Web インターフェースを作成

この例では、シートベースの料金体系の最小限の実装を示しています。本番環境で使用する場合は、エラーハンドリング、認証、データ検証、セキュリティ対策を追加し、アプリケーションの要件に合わせてロジックを調整してください。

Integration Guides

Billing Deconstructions

Cookbooks

座席ベースの価格設定とアドオンおよび支払いリンク

何を作成するか

ステップ1: 座席アドオンを作成する

ステップ2: 基本サブスクリプション製品を作成する

ステップ3: アドオンをサブスクリプションに接続する

Step 4: カスタムアドオン数量で支払いリンクを生成する

Step 5: 実装をテストする

Dodo Payments Webhooks Documentation

トラブルシューティング

おめでとうございます！シートベースの料金体系を実装しました

Base Subscription

Seat Add-ons

Checkout

Web Interface

​何を作成するか

​ステップ1: 座席アドオンを作成する

​ステップ2: 基本サブスクリプション製品を作成する

​ステップ3: アドオンをサブスクリプションに接続する

​Step 4: カスタムアドオン数量で支払いリンクを生成する

​Step 5: 実装をテストする

Dodo Payments Webhooks Documentation

​トラブルシューティング

​おめでとうございます！シートベースの料金体系を実装しました

Base Subscription

Seat Add-ons

Checkout

Web Interface

何を作成するか

ステップ1: 座席アドオンを作成する

ステップ2: 基本サブスクリプション製品を作成する

ステップ3: アドオンをサブスクリプションに接続する

Step 4: カスタムアドオン数量で支払いリンクを生成する

Step 5: 実装をテストする

トラブルシューティング

おめでとうございます！シートベースの料金体系を実装しました