基于座位的定价与附加组件和支付链接

本教程将介绍如何使用 Dodo Payments add-ons 实现基于席位的定价。你将创建一个包含额外席位 add-ons 的订阅产品，并生成带有自定义 add-on 数量的 payment links。

本教程使用 Node.js 和 Express。你可以根据所使用的框架（Next.js、React、Vue 等）调整代码，并自定义 UI 以匹配你的应用程序。

到本教程结束时，您将知道如何：

创建基于座位的订阅产品
设置额外座位的附加组件
生成带有自定义附加组件数量的支付链接
处理具有动态座位数量的结账会话

我们要构建的内容

让我们创建一个基于座位的定价模型：

基础套餐：每月 $49，最多包含 5 名团队成员
席位 Add-on：每增加一个席位，每月 $2
Payment Links：支持自定义席位数量的动态 checkout

开始之前，请确保您具备以下条件：

Dodo Payments 帐户
TypeScript/Node.js 的基本熟悉程度

第 1 步：创建您的座位附加组件

创建一个表示额外席位的 add-on。此 add-on 将附加到基础订阅，允许客户购买额外席位。

我们要构建的内容：一个每个席位每月收费 $2、可添加到任意基础订阅的 add-on。

Navigate to Add-Ons

在 Dodo Payments 仪表板中，保持在 产品（Products） 部分
点击 附加组件（Add-Ons） 选项卡
点击 创建附加组件（Create Add-On）

这将打开附加组件创建表单。

Enter add-on details

为我们的席位附加组件填写以下内容：附加组件名称：Additional Team Seat描述：Add extra team members to your workspace with full access to all features价格：输入 → 2.00货币：必须与您的基础订阅货币匹配税务类别：选择适合您产品的类别。

Save your add-on

检查所有设置：
- 名称：Additional Team Seat
- 价格：每月 $2.00
点击 Create Add-On

附加组件已创建！ 现在您可以将席位附加组件附加到订阅中。

第 2 步：创建您的基础订阅产品

创建一个包含 5 名团队成员的基础订阅产品。这将作为基于席位的定价模型的基础。

Navigate to Products

登录您的 Dodo Payments 仪表板
在左侧边栏中点击 产品（Products）
点击 创建产品（Create Product） 按钮
选择 订阅（Subscription） 作为产品类型

您将看到一个用于配置基础订阅的表单。

Fill in the subscription details

接下来我们为基础方案输入具体信息：产品名称：Motion描述：Where your team's documentation lives.定期价格：输入 → 49.00计费周期：选择 → Monthly货币：选择您偏好的货币（例如：USD）

第 3 步：将附加组件连接到订阅

将席位 add-on 关联到基础订阅，以便客户在 checkout 期间购买额外席位。

Attach the seat add-on

向下滚动到 附加组件 部分
点击 添加附加组件
从下拉菜单中选择您的座位附加组件
确认它出现在您的订阅配置中

Save subscription changes

查看完整的订阅设置：
- 基础方案：每月 $49，包含 5 个席位
- 附加项：每增加一个席位，每月 $2
点击 保存更改

基于席位的定价已配置完成！ 客户现在可以购买你的基础套餐，并按需添加额外席位。

第 4 步：生成带有自定义 Add-on 数量的 Payment Links

创建一个能够生成带有自定义 add-on 数量的 payment links 的 Express.js 应用。这样你就可以动态创建包含任意数量额外席位的 checkout sessions。

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 提交到版本控制系统。将 .env 添加到你的 .gitignore 文件中。

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

将以下内容添加到你的 src/server.ts，以提供 HTML 文件：

// 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 查看演示界面。

第 5 步：测试实现

让我们测试基于席位的定价实现，确保一切正常运行。

Start your server

确保你的 .env 文件包含正确的 API key
在代码中将产品 ID 和 add-on 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”
验证 checkout URLs 是否正确生成

Test a checkout session

生成一个包含 3 个额外席位的 checkout link
点击 checkout URL，打开 Dodo Payments checkout
验证 checkout 显示：
- 基础套餐：每月 $49
- 额外席位：3 × 2 dollars = 每月 $6
完成测试购买

checkout 应显示正确的价格明细，并允许你完成购买。

Listen for webhooks and update your database

通过监听来自 Dodo Payments 的 webhook events，使数据库与订阅和席位变更保持同步。当客户完成 checkout、更新订阅或更改席位数量时，webhooks 会通知你的后端。按照官方 Dodo Payments webhooks 指南中的分步说明设置 webhook endpoints 并处理 events：

Dodo Payments Webhooks Documentation

了解如何安全地接收和处理用于订阅与席位管理的 webhook events。

故障排除

常见问题及其解决方案：

Checkout creation failing

可能原因：

产品 ID 或 add-on ID 无效
API key 没有足够的权限
Add-on 未正确关联到订阅
网络连接问题

解决方案：

验证 Dodo Payments 控制面板中是否存在产品 ID 和 add-on ID
检查 add-on 是否已正确附加到订阅
确保 API key 具有创建 checkout session 的权限
使用简单的 GET request 测试 API connectivity

恭喜！你已实现基于席位的定价

你已成功使用 Dodo Payments 创建基于席位的定价系统。以下是你完成的内容：

Base Subscription

创建了一个每月 $49、包含 5 个席位的订阅产品

Seat Add-ons

配置了额外席位 add-ons，每个席位每月收费 $2

Checkout

构建了一个能够使用自定义席位数量生成 checkout sessions 的 API

Web Interface

创建了一个用于测试不同席位数量的简单 Web 界面

此示例演示了基于席位定价的最小实现。用于生产环境时，请添加错误处理、身份验证、数据验证和安全措施，并根据应用程序的需求调整逻辑。

Integration Guides

Billing Deconstructions

Cookbooks

基于座位的定价与附加组件和支付链接

我们要构建的内容

第 1 步：创建您的座位附加组件

第 2 步：创建您的基础订阅产品

第 3 步：将附加组件连接到订阅

第 4 步：生成带有自定义 Add-on 数量的 Payment Links

第 5 步：测试实现

Dodo Payments Webhooks Documentation

故障排除

恭喜！你已实现基于席位的定价

Base Subscription

Seat Add-ons

Checkout

Web Interface

​我们要构建的内容

​第 1 步：创建您的座位附加组件

​第 2 步：创建您的基础订阅产品

​第 3 步：将附加组件连接到订阅

​第 4 步：生成带有自定义 Add-on 数量的 Payment Links

​第 5 步：测试实现

Dodo Payments Webhooks Documentation

​故障排除

​恭喜！你已实现基于席位的定价

Base Subscription

Seat Add-ons

Checkout

Web Interface

我们要构建的内容

第 1 步：创建您的座位附加组件

第 2 步：创建您的基础订阅产品

第 3 步：将附加组件连接到订阅

第 4 步：生成带有自定义 Add-on 数量的 Payment Links

第 5 步：测试实现

故障排除

恭喜！你已实现基于席位的定价