Penetapan Harga Berdasarkan Kursi dengan Add-on dan Tautan Pembayaran

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.

Apa yang sedang kita bangun: Add-on yang berharga $2/bulan per kursi dan dapat ditambahkan ke langganan dasar mana 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

Kita akan mulai dengan membuat produk langganan dasar yang mencakup 5 anggota tim. Ini akan menjadi dasar dari model penetapan harga berdasarkan kursi kita.

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

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

Attach the seat add-on

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 pengaturan langganan lengkap Anda:
- Paket dasar: $49/bulan untuk 5 kursi
- Add-on: $2/bulan untuk setiap kursi tambahan
- Uji coba gratis: 14 hari
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.

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

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.

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');
});

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.

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.

Start your server

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

npm run dev

Server Anda harus mulai dengan sukses dan menampilkan “Server running on http://localhost:3000”

Test the web interface

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

Test a checkout session

Hasilkan tautan checkout dengan 3 kursi tambahan
Klik URL checkout untuk membuka checkout Dodo Payments
Verifikasi bahwa checkout menampilkan:
- Paket dasar: $49/bulan
- Kursi tambahan: 3 × 2 dolar = $6/bulan
Selesaikan pembelian uji coba

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

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:

Checkout creation failing

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:

Verifikasi bahwa ID produk dan add-on ada di dashboard Dodo Payments Anda
Periksa bahwa add-on terlampir dengan benar ke langganan
Pastikan kunci API memiliki izin untuk membuat sesi checkout
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.

​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: Hasilkan Tautan Pembayaran dengan Jumlah Add-On Kustom

​Langkah 5: Uji Implementasi Anda

Dodo Payments Webhooks Documentation

​Pemecahan Masalah

​Selamat! Anda Telah Menerapkan Penetapan Harga Berdasarkan Kursi

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: Hasilkan Tautan Pembayaran dengan Jumlah Add-On Kustom

Langkah 5: Uji Implementasi Anda

Pemecahan Masalah

Selamat! Anda Telah Menerapkan Penetapan Harga Berdasarkan Kursi