이제 추가 좌석을 나타내는 추가 기능을 만들어야 합니다. 이 추가 기능은 기본 구독에 연결되어 고객이 추가 좌석을 구매할 수 있도록 합니다.
우리가 만드는 것: 좌석당 월 $2이며 모든 기본 구독에 추가할 수 있는 추가 기능입니다.
1
Navigate to Add-Ons
Dodo Payments 대시보드에서 Products 섹션에 머물러 있습니다.
Add-Ons 탭을 클릭하세요.
Create Add-On을 클릭하세요.
이제 추가 기능 생성 폼이 열립니다.
2
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를 입력하세요통화: 기본 구독 통화와 일치해야 합니다.세금 카테고리: 제품에 적합한 카테고리를 선택하세요.
팀원 5명이 포함된 기본 구독 제품을 만드는 것으로 시작하겠습니다. 이것이 좌석 기반 가격 모델의 기초가 될 것입니다.
1
Navigate to Products
Dodo Payments 대시보드에 로그인하세요.
왼쪽 사이드바에서 Products를 클릭하세요.
Create Product 버튼을 클릭하세요.
상품 유형으로 Subscription을 선택하세요.
기본 구독을 구성할 수 있는 폼이 표시됩니다.
2
Fill in the subscription details
이제 기본 요금제에 대한 구체적인 세부 정보를 입력합니다:Product Name: MotionDescription: Where your team's documentation lives.Recurring Price: → 49.00를 입력하세요Billing Cycle: → Monthly를 선택하세요Currency: 원하는 통화를 선택하세요(예: USD)
API 키를 절대 버전 관리에 커밋하지 마세요. .env를 .gitignore 파일에 추가하세요.
3
Implement the checkout session creation
다음 코드를 포함한 src/server.ts 파일을 생성하세요:
복사
// Add this new endpoint for dynamic seat quantitiesimport 'dotenv/config';import DodoPayments from 'dodopayments';import express, { Request, Response } from 'express';const app = express();// Initialize the Dodo Payments clientconst 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 routeapp.post('/create-checkout/:seatCount', async (req: Request, res: Response) => { try { const seatCount = parseInt(req.params.seatCount); const session = await createCheckoutSession(seatCount); res.json({ checkout_url: session.checkout_url }); } catch (error) { res.status(500).json({ error: 'Failed to create checkout session' }); }});// Add this line after your other middlewareapp.use(express.static('public'));// Add this route to serve the demo pageapp.get('/', (req, res) => { res.sendFile(__dirname + '/../public/index.html');});app.listen(3000, () => { console.log('Server is running on port 3000');});
웹 인터페이스가 생성되었습니다! 이제 다양한 좌석 수를 테스트할 수 있는 간단한 UI가 생겼습니다.
5
Serve static files
HTML 파일을 제공하기 위해 src/server.ts에 다음을 추가하세요:
복사
// Add this line after your other middlewareapp.use(express.static('public'));// Add this route to serve the demo pageapp.get('/', (req, res) => { res.sendFile(__dirname + '/../public/index.html');});
정적 파일이 구성되었습니다! 데모 인터페이스를 보려면 http://localhost:3000로 이동하세요.
코드의 상품 및 추가 기능 ID를 Dodo Payments 대시보드의 실제 값으로 업데이트하세요.
서버를 시작하세요:
복사
npm run dev
서버가 성공적으로 시작되며 “Server running on http://localhost:3000”이 표시되어야 합니다.
2
Test the web interface
브라우저를 열고 http://localhost:3000로 이동하세요.
좌석 기반 가격 데모 인터페이스가 표시되는지 확인하세요.
다양한 좌석 수(0, 3, 10 등)를 시도하세요.
각 수량에 대해 “Generate Checkout Link”를 클릭하세요.
체크아웃 URL이 올바르게 생성되었는지 확인하세요.
3
Test a checkout session
추가 좌석 3개로 체크아웃 링크를 생성하세요.
체크아웃 URL을 클릭하여 Dodo Payments 체크아웃을 엽니다.
체크아웃에 다음 내용이 표시되는지 확인하세요:
기본 요금제: $49/월
추가 좌석: 3 × 2=6/월
테스트 구매를 완료하세요.
체크아웃은 올바른 가격 내역을 표시하고 구매를 완료할 수 있어야 합니다.
4
Listen for webhooks and update your DB
구독 및 좌석 변경 사항과 데이터베이스를 동기화하려면 Dodo Payments의 웹훅 이벤트를 수신해야 합니다. 웹훅은 고객이 체크아웃을 완료하거나 구독을 업데이트하거나 좌석 수를 변경할 때 백엔드에 알립니다.웹훅 엔드포인트를 설정하고 이벤트를 처리하는 방법에 대한 단계별 지침은 공식 Dodo Payments 웹훅 가이드를 참조하세요:
