تسعير قائم على المقاعد مع إضافات وروابط دفع

يوضح هذا البرنامج التعليمي كيفية تنفيذ التسعير القائم على المقاعد باستخدام إضافات Dodo Payments. ستنشئ منتج اشتراك مع إضافات للمقاعد الإضافية، وستنشئ روابط دفع بكميات إضافات مخصصة.

يستخدم هذا البرنامج التعليمي Node.js وExpress. يمكنك تكييف الكود مع إطار العمل الذي تستخدمه (Next.js وReact وVue وما إلى ذلك) وتخصيص واجهة المستخدم لتتناسب مع تطبيقك.

بنهاية هذا الدليل، ستعرف كيفية:

إنشاء منتجات اشتراك مع تسعير قائم على المقاعد
إعداد إضافات لمقاعد إضافية
توليد روابط دفع مع كميات إضافات مخصصة
التعامل مع جلسات الدفع مع عدد مقاعد ديناميكي

ما الذي نبنيه

لنقم بإنشاء نموذج تسعير قائم على المقاعد:

الخطة الأساسية: $49 شهريًا لما يصل إلى 5 أعضاء في الفريق
إضافة المقعد: $2 شهريًا لكل مقعد إضافي
روابط الدفع: صفحة دفع ديناميكية بكميات مقاعد مخصصة

قبل أن نبدأ، تأكد من أن لديك:

حساب في Dodo Payments
معرفة أساسية بـ TypeScript/Node.js

الخطوة 1: إنشاء إضافة المقعد الخاصة بك

أنشئ إضافة تمثل المقاعد الإضافية. سيتم إرفاق هذه الإضافة باشتراكك الأساسي، وستتيح للعملاء شراء مقاعد إضافية.

ما سننشئه: إضافة تكلف $2 شهريًا لكل مقعد، ويمكن إضافتها إلى أي اشتراك أساسي.

Navigate to Add-Ons

في لوحة تحكم Dodo Payments الخاص بك، ابق في قسم المنتجات
انقر على علامة التبويب الإضافات
انقر على إنشاء إضافة

سيؤدي هذا إلى فتح نموذج إنشاء الإضافة.

Enter add-on details

املأ القيم التالية لإضافة المقاعد الخاصة بنا:اسم الإضافة: Additional Team Seatالوصف: Add extra team members to your workspace with full access to all featuresالسعر: أدخل → 2.00العملة: يجب أن تتطابق مع عملة الاشتراك الأساسي الخاص بكفئة الضريبة: اختر الفئة المناسبة لمنتجك.

Save your add-on

راجع جميع إعداداتك:
- الاسم: مقعد فريق إضافي
- السعر: $2.00 شهريًا
انقر على إنشاء إضافة

تم إنشاء الإضافة! أصبحت إضافة المقاعد متاحة الآن لربطها بالاشتراكات.

الخطوة 2: إنشاء منتج الاشتراك الأساسي الخاص بك

أنشئ منتج اشتراك أساسيًا يتضمن 5 أعضاء في الفريق. سيكون هذا أساس نموذج التسعير القائم على المقاعد.

Navigate to Products

سجّل الدخول إلى لوحة تحكم Dodo Payments الخاصة بك
انقر على المنتجات في الشريط الجانبي الأيسر
انقر على زر إنشاء منتج
اختر اشتراك كنوع المنتج

سيظهر لك نموذج سنقوم من خلاله بتكوين اشتراكنا الأساسي.

Fill in the subscription details

الآن سندخل التفاصيل المحددة لخطة الأساس لدينا:اسم المنتج: Motionالوصف: Where your team's documentation lives.السعر الدوري: أدخل → 49.00دورة الفوترة: اختر → Monthlyالعملة: اختر العملة المفضلة لديك (مثلاً USD)

الخطوة 3: ربط الإضافة بالاشتراك

اربط إضافة المقعد بالاشتراك الأساسي حتى يتمكن العملاء من شراء مقاعد إضافية أثناء إتمام الدفع.

Attach the seat add-on

قم بالتمرير لأسفل إلى قسم الإضافات
انقر إضافة إضافات
من القائمة المنسدلة، اختر إضافة المقعد الخاصة بك
تأكد من أنها تظهر في تكوين اشتراكك

Save subscription changes

راجع إعداد اشتراكك الكامل:
- الخطة الأساسية: $49/شهريًا لـ 5 مقاعد
- الإضافة: $2/شهريًا لكل مقعد إضافي
انقر على حفظ التغييرات

تم إعداد التسعير القائم على المقاعد! يمكن للعملاء الآن شراء خطتك الأساسية وإضافة مقاعد إضافية حسب الحاجة.

الخطوة 4: إنشاء روابط دفع بكميات إضافات مخصصة

أنشئ تطبيق Express.js ينشئ روابط دفع بكميات إضافات مخصصة. يتيح لك ذلك إنشاء جلسات دفع ديناميكيًا بأي عدد من المقاعد الإضافية.

Set up your project

أنشئ مشروع Node.js جديدًا وثبّت التبعيات المطلوبة:

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

أنشئ ملف .env باستخدام مفتاح Dodo Payments API الخاص بك:

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

لا تضع مفتاح API الخاص بك في نظام التحكم بالإصدارات مطلقًا. أضف .env إلى ملف .gitignore.

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>

تم إنشاء واجهة الويب! لديك الآن واجهة مستخدم بسيطة لاختبار كميات مختلفة من المقاعد.

Serve static files

أضف هذا إلى ملف src/server.ts لتقديم ملف 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');
});

تم إعداد الملفات الثابتة! انتقل إلى http://localhost:3000 لرؤية واجهة العرض التوضيحية.

الخطوة 5: اختبار التنفيذ

لنختبر تنفيذ التسعير القائم على المقاعد للتأكد من أن كل شيء يعمل بشكل صحيح.

Start your server

تأكد من أن ملف .env يحتوي على مفتاح API الصحيح
حدّث معرّفات المنتج والإضافة في الكود باستخدام القيم الفعلية من لوحة تحكم Dodo Payments
ابدأ تشغيل الخادم:

npx ts-node src/server.ts

يجب أن يبدأ تشغيل الخادم بنجاح ويعرض “Server is running on port 3000”

Test the web interface

واجهة عرض توضيحية للتسعير القائم على المقاعد

افتح المتصفح وانتقل إلى http://localhost:3000
يجب أن ترى واجهة العرض التوضيحية للتسعير القائم على المقاعد
جرّب كميات مختلفة من المقاعد (0 و3 و10، وغير ذلك)
انقر على “Generate Checkout Link” لكل كمية
تحقّق من إنشاء عناوين URL للدفع بشكل صحيح

Test a checkout session

أنشئ رابط دفع باستخدام 3 مقاعد إضافية
انقر على عنوان URL للدفع لفتح صفحة الدفع في Dodo Payments
تحقّق من أن صفحة الدفع تعرض:
- الخطة الأساسية: $49 شهريًا
- المقاعد الإضافية: 3 × 2 دولار = $6 شهريًا
أكمل عملية الشراء الاختبارية

يجب أن تعرض صفحة الدفع تفاصيل الأسعار الصحيحة وأن تتيح لك إكمال عملية الشراء.

Listen for webhooks and update your database

حافظ على مزامنة قاعدة بياناتك مع تغييرات الاشتراكات والمقاعد من خلال الاستماع إلى أحداث webhook الواردة من Dodo Payments. تُخطر webhooks الواجهة الخلفية لديك عندما يُكمل العميل الدفع، أو يحدّث اشتراكه، أو يغيّر عدد المقاعد.اتبع دليل Dodo Payments الرسمي حول webhooks للحصول على تعليمات تفصيلية لإعداد نقاط نهاية webhook ومعالجة الأحداث:

Dodo Payments Webhooks Documentation

تعلّم كيفية استقبال أحداث webhook ومعالجتها بأمان لإدارة الاشتراكات والمقاعد.

استكشاف الأخطاء وإصلاحها

المشكلات الشائعة وحلولها:

Checkout creation failing

الأسباب المحتملة:

معرّف المنتج أو معرّف الإضافة غير صالح
لا يملك مفتاح API أذونات كافية
لم تتم إضافة الإضافة إلى الاشتراك بشكل صحيح
مشكلات في اتصال الشبكة

الحلول:

تحقّق من وجود معرّفات المنتج والإضافة في لوحة تحكم Dodo Payments
تحقّق من إرفاق الإضافة بالاشتراك بشكل صحيح
تأكد من امتلاك مفتاح API أذونات إنشاء جلسات الدفع
اختبر اتصال API باستخدام طلب GET بسيط

تهانينا! لقد نفّذت التسعير القائم على المقاعد

لقد أنشأت بنجاح نظام تسعير قائمًا على المقاعد باستخدام Dodo Payments. إليك ما أنجزته:

Base Subscription

أنشأت منتج اشتراك يتضمن 5 مقاعد بسعر $49 شهريًا

Seat Add-ons

أعددت إضافات للمقاعد الإضافية بسعر $2 شهريًا لكل مقعد

Checkout

أنشأت API ينشئ جلسات دفع بكميات مقاعد مخصصة

Web Interface

أنشأت واجهة ويب بسيطة لاختبار كميات مختلفة من المقاعد

يوضح هذا المثال تنفيذًا أساسيًا للتسعير القائم على المقاعد. للاستخدام في بيئة الإنتاج، أضف معالجة الأخطاء والمصادقة والتحقق من البيانات وإجراءات الأمان، وكيّف المنطق ليتوافق مع متطلبات تطبيقك.

Integration Guides

Billing Deconstructions

Cookbooks

تسعير قائم على المقاعد مع إضافات وروابط دفع

ما الذي نبنيه

الخطوة 1: إنشاء إضافة المقعد الخاصة بك

الخطوة 2: إنشاء منتج الاشتراك الأساسي الخاص بك

الخطوة 3: ربط الإضافة بالاشتراك

الخطوة 4: إنشاء روابط دفع بكميات إضافات مخصصة

الخطوة 5: اختبار التنفيذ

Dodo Payments Webhooks Documentation

استكشاف الأخطاء وإصلاحها

تهانينا! لقد نفّذت التسعير القائم على المقاعد

Base Subscription

Seat Add-ons

Checkout

Web Interface

​ما الذي نبنيه

​الخطوة 1: إنشاء إضافة المقعد الخاصة بك

​الخطوة 2: إنشاء منتج الاشتراك الأساسي الخاص بك

​الخطوة 3: ربط الإضافة بالاشتراك

​الخطوة 4: إنشاء روابط دفع بكميات إضافات مخصصة

​الخطوة 5: اختبار التنفيذ

Dodo Payments Webhooks Documentation

​استكشاف الأخطاء وإصلاحها

​تهانينا! لقد نفّذت التسعير القائم على المقاعد

Base Subscription

Seat Add-ons

Checkout

Web Interface

ما الذي نبنيه

الخطوة 1: إنشاء إضافة المقعد الخاصة بك

الخطوة 2: إنشاء منتج الاشتراك الأساسي الخاص بك

الخطوة 3: ربط الإضافة بالاشتراك

الخطوة 4: إنشاء روابط دفع بكميات إضافات مخصصة

الخطوة 5: اختبار التنفيذ

استكشاف الأخطاء وإصلاحها

تهانينا! لقد نفّذت التسعير القائم على المقاعد