좌석 기반 가격 책정 및 추가 기능과 결제 링크

이 튜토리얼에서는 Dodo Payments add-ons를 사용하여 좌석 기반 가격을 구현하는 방법을 보여줍니다. 추가 좌석용 add-ons가 포함된 구독 상품을 만들고, 사용자 지정 add-on 수량으로 결제 링크를 생성합니다.

이 튜토리얼에서는 Node.js와 Express를 사용합니다. 사용 중인 프레임워크(Next.js, React, Vue 등)에 맞게 코드를 조정하고 애플리케이션에 맞도록 UI를 사용자 지정할 수 있습니다.

이 튜토리얼이 끝나면 다음을 수행할 수 있습니다:

좌석 기반 가격 책정으로 구독 제품 만들기
추가 좌석을 위한 추가 기능 설정
사용자 지정 추가 기능 수량으로 결제 링크 생성
동적 좌석 수로 체크아웃 세션 처리

우리가 만들고 있는 것

좌석 기반 가격 모델을 만들어 보겠습니다:

기본 플랜: 최대 팀원 5명까지 월 $49
좌석 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

다음 값을 좌석 추가 기능에 입력하세요: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

모든 설정을 검토합니다.
- 이름: Additional Team Seat
- 가격: 월 $2.00
Create Add-On을 클릭합니다.

추가 기능이 생성되었습니다! 좌석 추가 기능을 이제 구독에 연결할 수 있습니다.

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단계: 추가 기능을 구독에 연결하기

고객이 checkout 중에 추가 좌석을 구매할 수 있도록 좌석 add-on을 기본 구독에 연결합니다.

Attach the seat add-on

추가 기능 섹션으로 스크롤하세요.
추가 기능 추가를 클릭하세요.
드롭다운에서 좌석 추가 기능을 선택하세요.
구독 구성에 추가 기능이 표시되는지 확인하세요.

Save subscription changes

전체 구독 설정을 검토합니다:
- 기본 플랜: 5개 좌석에 $49/월
- 추가 기능: 추가 좌석당 $2/월
변경 사항 저장을 클릭합니다

좌석 기반 가격이 구성되었습니다! 이제 고객은 기본 플랜을 구매하고 필요에 따라 좌석을 추가할 수 있습니다.

4단계: 사용자 지정 Add-on 수량으로 Payment Links 생성

사용자 지정 add-on 수량으로 결제 링크를 생성하는 Express.js 애플리케이션을 만듭니다. 이를 통해 원하는 수의 추가 좌석으로 checkout 세션을 동적으로 생성할 수 있습니다.

Set up your project

새 Node.js 프로젝트를 만들고 필요한 dependencies를 설치합니다:

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를 version control에 절대 commit하지 마세요. .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 interface가 생성되었습니다! 이제 다양한 좌석 수량을 테스트할 수 있는 간단한 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');
});

Static files가 구성되었습니다! http://localhost:3000를 방문하여 데모 interface를 확인합니다.

5단계: 구현 테스트

좌석 기반 가격 구현이 올바르게 작동하는지 테스트해 보겠습니다.

Start your server

올바른 API key가 포함된 .env 파일이 있는지 확인합니다.
코드의 product 및 add-on ID를 Dodo Payments 대시보드의 실제 값으로 업데이트합니다.
서버를 시작합니다:

npx ts-node src/server.ts

서버가 성공적으로 시작되고 “Server is running on port 3000”이 표시되어야 합니다.

Test the web interface

브라우저를 열고 http://localhost:3000로 이동합니다.
좌석 기반 가격 데모 interface가 표시되어야 합니다.
다양한 좌석 수량(0, 3, 10 등)을 시도합니다.
각 수량에 대해 “Generate Checkout Link”를 클릭합니다.
checkout URL이 올바르게 생성되는지 확인합니다.

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 event를 수신하여 구독 및 좌석 변경 사항과 database를 동기화된 상태로 유지합니다. Webhook은 고객이 checkout을 완료하거나 구독을 업데이트하거나 좌석 수를 변경할 때 backend에 알림을 보냅니다.webhook endpoint를 설정하고 event를 처리하는 단계별 지침은 공식 Dodo Payments webhooks 가이드를 따르세요:

Dodo Payments Webhooks Documentation

구독 및 좌석 관리를 위해 webhook event를 안전하게 수신하고 처리하는 방법을 알아보세요.

문제 해결

일반적인 문제와 해결 방법입니다:

Checkout creation failing

가능한 원인:

유효하지 않은 product ID 또는 add-on ID
API key에 충분한 permission이 없음
Add-on이 subscription에 올바르게 연결되지 않음
Network connectivity 문제

해결 방법:

Dodo Payments 대시보드에 product 및 add-on ID가 존재하는지 확인합니다.
add-on이 subscription에 올바르게 연결되어 있는지 확인합니다.
API key에 checkout session 생성 permission이 있는지 확인합니다.
간단한 GET request로 API connectivity를 테스트합니다.

축하합니다! 좌석 기반 가격을 구현했습니다

Dodo Payments를 사용하여 좌석 기반 가격 시스템을 성공적으로 만들었습니다. 다음 작업을 완료했습니다:

Base Subscription

월 $49에 좌석 5개가 포함된 구독 상품 생성

Seat Add-ons

좌석당 월 $2의 추가 좌석용 add-on 구성

Checkout

사용자 지정 좌석 수량으로 checkout session을 생성하는 API 구축

Web Interface

다양한 좌석 수량을 테스트할 수 있는 간단한 web interface 생성

이 예제는 좌석 기반 가격의 최소 구현을 보여줍니다. Production 환경에서는 error handling, authentication, data validation, security measures를 추가하고 애플리케이션의 요구 사항에 맞게 로직을 조정하세요.

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단계: 구현 테스트

문제 해결

축하합니다! 좌석 기반 가격을 구현했습니다