Penetapan Harga Berdasarkan Kursi dengan Add-on dan Tautan Pembayaran

Tutorial ini menunjukkan cara menerapkan penetapan harga berbasis seat menggunakan add-on Dodo Payments. Anda akan membuat produk langganan dengan add-on untuk seat tambahan dan membuat payment link dengan jumlah add-on khusus.

Tutorial ini menggunakan Node.js dan Express. Anda dapat menyesuaikan kode untuk framework Anda (Next.js, React, Vue, dll.) serta menyesuaikan UI agar sesuai dengan 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:

Paket Dasar: $49/bulan untuk hingga 5 anggota tim
Add-on Seat: $2/bulan per seat tambahan
Payment Link: checkout dinamis dengan jumlah seat khusus

Sebelum kita mulai, pastikan Anda sudah memiliki:

Akun Dodo Payments
Pemahaman dasar tentang TypeScript/Node.js

Langkah 1: Buat Add-On Kursi Anda

Buat add-on yang merepresentasikan seat tambahan. Add-on ini akan dilampirkan ke langganan dasar dan memungkinkan pelanggan membeli seat tambahan.

Yang akan kita buat: Add-on seharga $2/bulan per seat yang dapat ditambahkan ke langganan dasar apa pun.

Navigate to Add-Ons

Di dashboard Dodo Payments Anda, tetaplah di bagian Products
Klik tab Add-Ons
Klik Create Add-On

Ini akan membuka formulir pembuatan add-on.

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.

Save your add-on

Tinjau semua pengaturan Anda:
- Nama: Additional Team Seat
- Harga: $2.00/bulan
Klik Create Add-On

Add-on dibuat! Add-on kursi Anda sekarang tersedia untuk dilampirkan ke langganan.

Langkah 2: Buat Produk Langganan Dasar Anda

Buat produk langganan dasar yang mencakup 5 anggota tim. Produk ini akan menjadi dasar model penetapan harga berbasis seat Anda.

Navigate to Products

Masuk ke dashboard Dodo Payments Anda
Klik Products di bilah sisi kiri
Klik tombol Create Product
Pilih Subscription sebagai tipe produk

Anda akan melihat formulir tempat kita akan mengonfigurasi langganan dasar.

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

Hubungkan add-on seat Anda dengan langganan dasar agar pelanggan dapat membeli seat tambahan selama checkout.

Attach the seat add-on

Melampirkan add-on ke langganan di dashboard

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

Save subscription changes

Tinjau penyiapan langganan lengkap Anda:
- Paket dasar: $49/bulan untuk 5 kursi
- Add-on: $2/bulan untuk setiap kursi tambahan
Klik Simpan Perubahan

Penetapan harga berbasis seat telah dikonfigurasi! Pelanggan kini dapat membeli paket dasar Anda dan menambahkan seat ekstra sesuai kebutuhan.

Langkah 4: Buat Payment Link dengan Jumlah Add-on Khusus

Buat aplikasi Express.js yang menghasilkan payment link dengan jumlah add-on khusus. Dengan demikian, Anda dapat membuat sesi checkout secara dinamis dengan jumlah seat tambahan berapa pun.

Set up your project

Buat proyek Node.js baru dan instal dependensi yang diperlukan:

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
  }
}

Create your environment file

Buat file .env dengan API key Dodo Payments Anda:

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

Jangan pernah commit API key Anda ke version control. Tambahkan .env ke file .gitignore Anda.

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);
    // 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

Buat file public/index.html untuk pengujian dengan 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 telah dibuat! Kini Anda memiliki UI sederhana untuk menguji berbagai jumlah seat.

Serve static files

Tambahkan ini ke src/server.ts Anda untuk menyajikan file 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');
});

File statis telah dikonfigurasi! Kunjungi http://localhost:3000 untuk melihat antarmuka demo Anda.

Langkah 5: Uji Implementasi Anda

Mari uji implementasi penetapan harga berbasis seat untuk memastikan semuanya berfungsi dengan benar.

Start your server

Pastikan Anda memiliki file .env dengan API key yang benar
Perbarui ID produk dan add-on dalam kode Anda dengan nilai aktual dari dashboard Dodo Payments
Jalankan server Anda:

npx ts-node src/server.ts

Server Anda seharusnya berhasil dimulai dan menampilkan “Server is running on port 3000”

Test the web interface

Antarmuka demo penetapan harga berbasis seat

Buka browser Anda dan buka http://localhost:3000
Anda seharusnya melihat antarmuka demo penetapan harga berbasis seat
Coba berbagai jumlah seat (0, 3, 10, dll.)
Klik “Generate Checkout Link” untuk setiap jumlah
Verifikasi bahwa URL checkout dibuat dengan benar

Test a checkout session

Buat payment link dengan 3 seat tambahan
Klik URL checkout untuk membuka checkout Dodo Payments
Verifikasi bahwa checkout menampilkan:
- Paket dasar: $49/bulan
- Seat tambahan: 3 × 2 dolar = $6/bulan
Selesaikan pembelian pengujian

Checkout seharusnya menampilkan rincian harga yang benar dan memungkinkan Anda menyelesaikan pembelian.

Listen for webhooks and update your database

Jaga database Anda tetap sinkron dengan perubahan langganan dan seat dengan mendengarkan event webhook dari Dodo Payments. Webhook memberi tahu backend Anda saat pelanggan menyelesaikan checkout, memperbarui langganan, atau mengubah jumlah seat.Ikuti panduan webhook resmi Dodo Payments untuk mendapatkan instruksi langkah demi langkah tentang penyiapan endpoint webhook dan penanganan event:

Dodo Payments Webhooks Documentation

Pelajari cara menerima dan memproses event webhook dengan aman untuk mengelola langganan dan seat.

Pemecahan Masalah

Masalah umum dan solusinya:

Checkout creation failing

Kemungkinan penyebab:

ID produk atau ID add-on tidak valid
API key tidak memiliki izin yang memadai
Add-on tidak dikaitkan dengan langganan dengan benar
Masalah konektivitas jaringan

Solusi:

Verifikasi bahwa ID produk dan add-on tersedia di dashboard Dodo Payments Anda
Periksa bahwa add-on telah dilampirkan dengan benar ke langganan
Pastikan API key memiliki izin untuk membuat sesi checkout
Uji konektivitas API dengan request GET sederhana

Selamat! Anda Telah Menerapkan Penetapan Harga Berbasis Seat

Anda telah berhasil membuat sistem penetapan harga berbasis seat dengan Dodo Payments. Berikut hal-hal yang telah Anda capai:

Base Subscription

Membuat produk langganan dengan 5 seat yang disertakan seharga $49/bulan

Seat Add-ons

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

Checkout

Membangun API yang menghasilkan sesi checkout dengan jumlah seat khusus

Web Interface

Membuat antarmuka web sederhana untuk menguji berbagai jumlah seat

Contoh ini menunjukkan implementasi minimal penetapan harga berbasis seat. Untuk penggunaan production, tambahkan error handling, authentication, validasi data, langkah-langkah keamanan, dan sesuaikan logikanya dengan kebutuhan aplikasi Anda.

Integration Guides

Billing Deconstructions

Cookbooks

Penetapan Harga Berdasarkan Kursi dengan Add-on dan Tautan Pembayaran

Apa yang Kita Bangun

Langkah 1: Buat Add-On Kursi Anda

Langkah 2: Buat Produk Langganan Dasar Anda

Langkah 3: Hubungkan Add-On ke Langganan

Langkah 4: Buat Payment Link dengan Jumlah Add-on Khusus

Langkah 5: Uji Implementasi Anda

Dodo Payments Webhooks Documentation

Pemecahan Masalah

Selamat! Anda Telah Menerapkan Penetapan Harga Berbasis Seat

Base Subscription

Seat Add-ons

Checkout

Web Interface

​Apa yang Kita Bangun

​Langkah 1: Buat Add-On Kursi Anda

​Langkah 2: Buat Produk Langganan Dasar Anda

​Langkah 3: Hubungkan Add-On ke Langganan

​Langkah 4: Buat Payment Link dengan Jumlah Add-on Khusus

​Langkah 5: Uji Implementasi Anda

Dodo Payments Webhooks Documentation

​Pemecahan Masalah

​Selamat! Anda Telah Menerapkan Penetapan Harga Berbasis Seat

Base Subscription

Seat Add-ons

Checkout

Web Interface

Apa yang Kita Bangun

Langkah 1: Buat Add-On Kursi Anda

Langkah 2: Buat Produk Langganan Dasar Anda

Langkah 3: Hubungkan Add-On ke Langganan

Langkah 4: Buat Payment Link dengan Jumlah Add-on Khusus

Langkah 5: Uji Implementasi Anda

Pemecahan Masalah

Selamat! Anda Telah Menerapkan Penetapan Harga Berbasis Seat