Langsung ke konten utama
Dalam tutorial ini, Anda akan belajar cara menerapkan penetapan harga berdasarkan kursi menggunakan add-on Dodo Payments. Kami akan membuat produk langganan dengan add-on untuk kursi tambahan dan menunjukkan cara menghasilkan tautan pembayaran dengan jumlah add-on kustom.
Tutorial ini menyediakan contoh kode implementasi untuk aplikasi Node.js/Express. Anda dapat memodifikasi kode ini sesuai kebutuhan kerangka kerja spesifik Anda (Next.js, React, Vue, dll.) dan menyesuaikan antarmuka pengguna sesuai kebutuhan aplikasi Anda.
Pada akhir tutorial ini, Anda akan tahu cara:
  • Membuat produk langganan dengan penetapan harga berdasarkan kursi
  • Mengatur add-on untuk kursi tambahan
  • Menghasilkan tautan pembayaran dengan jumlah add-on kustom
  • Menangani sesi checkout dengan jumlah kursi dinamis

​
Apa yang Kita Bangun

Mari kita buat model penetapan harga berdasarkan kursi:
  • Rencana Dasar: $49/bulan untuk hingga 5 anggota tim
  • Add-on Kursi: $2/bulan per kursi tambahan
  • Tautan Pembayaran: Checkout dinamis dengan jumlah kursi kustom
Sebelum kita mulai, pastikan Anda sudah memiliki:
  • Akun Dodo Payments
  • Pemahaman dasar tentang TypeScript/Node.js

​
Langkah 1: Buat Add-On Kursi Anda

Sekarang kita perlu membuat add-on yang mewakili kursi tambahan. Add-on ini akan dilampirkan pada langganan dasar kita dan memungkinkan pelanggan untuk membeli kursi tambahan.
Membuat produk langganan dasar
Apa yang sedang kita bangun: Add-on yang berharga $2/bulan per kursi dan dapat ditambahkan ke langganan dasar mana pun.
1

Navigate to Add-Ons

  1. Di dashboard Dodo Payments Anda, tetaplah di bagian Products
  2. Klik tab Add-Ons
  3. Klik Create Add-On
Ini akan membuka formulir pembuatan add-on.
2

Enter add-on details

Isi nilai-nilai berikut untuk add-on kursi kami:Nama Add-On: Additional Team SeatDeskripsi: Add extra team members to your workspace with full access to all featuresHarga: Masukkan → 2.00Mata Uang: Harus sesuai dengan mata uang langganan dasar AndaKategori Pajak: Pilih kategori yang sesuai untuk produk Anda.
3

Save your add-on

  1. Tinjau semua pengaturan Anda:
    • Nama: Additional Team Seat
    • Harga: $2.00/bulan
  2. Klik Create Add-On
Add-on dibuat! Add-on kursi Anda sekarang tersedia untuk dilampirkan ke langganan.

​
Langkah 2: Buat Produk Langganan Dasar Anda

Kita akan mulai dengan membuat produk langganan dasar yang mencakup 5 anggota tim. Ini akan menjadi dasar dari model penetapan harga berdasarkan kursi kita.
Mengaitkan add-on ke langganan
1

Navigate to Products

  1. Masuk ke dashboard Dodo Payments Anda
  2. Klik Products di bilah sisi kiri
  3. Klik tombol Create Product
  4. Pilih Subscription sebagai tipe produk
Anda akan melihat formulir tempat kita akan mengonfigurasi langganan dasar.
2

Fill in the subscription details

Sekarang kita akan memasukkan detail spesifik untuk paket dasar kita:Nama Produk: MotionDeskripsi: Where your team's documentation lives.Harga Berulang: Masukkan → 49.00Siklus Penagihan: Pilih → MonthlyMata Uang: Pilih mata uang pilihan Anda (misalnya, USD)

​
Langkah 3: Hubungkan Add-On ke Langganan

Sekarang kita perlu mengaitkan add-on kursi kita dengan langganan dasar agar pelanggan dapat membeli kursi tambahan selama checkout.
1

Attach the seat add-on

Mengaitkan add-on ke langganan
  1. Gulir ke bawah ke bagian Add-Ons
  2. Klik Tambahkan Add-Ons
  3. Dari dropdown, pilih add-on kursi Anda
  4. Konfirmasi bahwa itu muncul dalam konfigurasi langganan Anda
2

Save subscription changes

  1. Tinjau pengaturan langganan lengkap Anda:
    • Paket dasar: $49/bulan untuk 5 kursi
    • Add-on: $2/bulan untuk setiap kursi tambahan
    • Uji coba gratis: 14 hari
  2. Klik Save Changes
Harga berbasis kursi dikonfigurasi! Pelanggan sekarang dapat membeli paket dasar Anda dan menambahkan kursi tambahan sesuai kebutuhan.

​
Langkah 4: Hasilkan Tautan Pembayaran dengan Jumlah Add-On Kustom

Sekarang mari kita buat aplikasi Express.js yang menghasilkan tautan pembayaran dengan jumlah add-on kustom. Di sinilah kekuatan nyata dari penetapan harga berdasarkan kursi muncul - Anda dapat secara dinamis membuat sesi checkout dengan jumlah kursi tambahan yang diinginkan.
1

Set up your project

Buat proyek Node.js baru dan pasang dependensi yang dibutuhkan:
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
Buat file tsconfig.json:
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
2

Create your environment file

Buat file .env dengan kunci API Dodo Payments Anda:
DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here
Jangan pernah meng-commit kunci API Anda ke kontrol versi. Tambahkan .env ke file .gitignore Anda.
3

Implement the checkout session creation

Buat file src/server.ts dengan kode berikut:
// 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);
    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 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');
});
4

Add a simple web interface

Buat file public/index.html untuk pengujian yang lebih mudah:
<!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>
Antarmuka web dibuat! Anda sekarang memiliki UI sederhana untuk menguji jumlah kursi yang berbeda.
5

Serve static files

Tambahkan ini ke src/server.ts Anda agar file HTML bisa disajikan:
// 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');
});
File statis dikonfigurasikan! Kunjungi http://localhost:3000 untuk melihat antarmuka demo Anda.

​
Langkah 5: Uji Implementasi Anda

Mari kita uji implementasi penetapan harga berdasarkan kursi kita untuk memastikan semuanya berfungsi dengan benar.
1

Start your server

  1. Pastikan Anda memiliki file .env dengan kunci API yang benar
  2. Perbarui ID produk dan add-on di kode Anda dengan nilai aktual dari dashboard Dodo Payments Anda
  3. Jalankan server Anda:
npm run dev
Server Anda harus mulai dengan sukses dan menampilkan “Server running on http://localhost:3000”
2

Test the web interface

Membuat produk langganan dasar
  1. Buka peramban Anda dan pergi ke http://localhost:3000
  2. Anda akan melihat antarmuka demo harga berbasis kursi
  3. Coba berbagai jumlah kursi (0, 3, 10, dll.)
  4. Klik “Generate Checkout Link” untuk setiap jumlah
  5. Verifikasi bahwa URL checkout dihasilkan dengan benar
3

Test a checkout session

  1. Hasilkan tautan checkout dengan 3 kursi tambahan
  2. Klik URL checkout untuk membuka checkout Dodo Payments
  3. Verifikasi bahwa checkout menampilkan:
    • Paket dasar: $49/bulan
    • Kursi tambahan: 3 × 2 dolar = $6/bulan
  4. Selesaikan pembelian uji coba
Checkout harus menampilkan rincian harga yang benar dan memungkinkan Anda menyelesaikan pembelian.
4

Listen for webhooks and update your DB

Untuk menjaga basis data Anda tetap sinkron dengan perubahan langganan dan kursi, Anda perlu mendengarkan event webhook dari Dodo Payments. Webhook memberi tahu backend Anda saat pelanggan menyelesaikan checkout, memperbarui langganan mereka, atau mengubah jumlah kursi.Ikuti panduan webhook resmi Dodo Payments untuk instruksi langkah demi langkah tentang cara mengatur endpoint webhook dan menangani peristiwa:

Dodo Payments Webhooks Documentation

Pelajari cara menerima dan memproses event webhook dengan aman untuk manajemen langganan dan kursi.

​
Pemecahan Masalah

Masalah umum dan solusinya:
Kemungkinan penyebab:
  • ID produk atau ID add-on tidak valid
  • Kunci API tidak memiliki izin yang cukup
  • Add-on tidak terhubung dengan benar ke langganan
  • Masalah konektivitas jaringan
Solusi:
  1. Verifikasi bahwa ID produk dan add-on ada di dashboard Dodo Payments Anda
  2. Periksa bahwa add-on terlampir dengan benar ke langganan
  3. Pastikan kunci API memiliki izin untuk membuat sesi checkout
  4. Uji konektivitas API dengan permintaan GET sederhana

​
Selamat! Anda Telah Menerapkan Penetapan Harga Berdasarkan Kursi

Anda telah berhasil membuat sistem penetapan harga berdasarkan kursi dengan Dodo Payments! Berikut adalah apa yang telah Anda capai:

Base Subscription

Membuat produk langganan dengan 5 kursi termasuk seharga $49/bulan

Seat Add-ons

Mengonfigurasi add-on untuk kursi tambahan seharga $2/bulan per kursi

Checkout

Membangun API yang menghasilkan sesi checkout dengan jumlah kursi kustom

Web Interface

Membuat antarmuka web sederhana untuk menguji berbagai jumlah kursi
Contoh ini hanya menunjukkan implementasi minimal dari harga berbasis kursi. Untuk penggunaan produksi, sebaiknya tambahkan penanganan kesalahan yang kuat, otentikasi, validasi data, langkah-langkah keamanan, dan sesuaikan logika agar sesuai dengan kebutuhan aplikasi Anda.