> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK الفوترة

> بنية تحتية كاملة للفوترة لتطبيقات الويب الحديثة مع مكونات React، أدوات CLI، ودعم التكامل الكامل مع الأنظمة الخلفية

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/32RVbEllEi0" title="Billing SDK | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

SDK الفوترة هو حل شامل مفتوح المصدر يوفر بنية تحتية كاملة للفوترة لتطبيقات الويب الحديثة. يتضمن مكونات React، أدوات CLI، ودعم التكامل الكامل مع عدة أطر عمل مع مدفوعات دودي.

## نظرة عامة

يوفر SDK الفوترة:

* **مكونات React**: مكونات فوترة مسبقة البناء وقابلة للتخصيص لتطبيقات React
* **أدوات CLI**: واجهة سطر الأوامر لتهيئة المشروع وإدارة المكونات
* **دعم الأطر**: التكامل مع Next.js، Express.js، Hono، Fastify، وReact
* **موفر الدفع**: تكامل كامل مع مدفوعات دودي

## بدء سريع

ابدأ مع SDK الفوترة في دقائق:

<Steps>
  <Step title="Install the CLI">
    استخدم npx لتشغيل CLI دون تثبيت:

    ```bash theme={null}
    npx @billingsdk/cli --help
    ```

    أو قم بتثبيته عالميًا للاستخدام المتكرر:

    ```bash theme={null}
    npm install -g @billingsdk/cli
    ```
  </Step>

  <Step title="Initialize a Project">
    شغّل الإعداد التفاعلي لإنشاء مشروع فوترة جديد:

    ```bash theme={null}
    npx @billingsdk/cli init
    ```

    سيُطلب منك اختيار:

    * إطار العمل المفضل لديك (Next.js, Express.js, Hono, Fastify, React)
    * مزود الدفع الخاص بك (Dodo Payments)
  </Step>

  <Step title="Add Components">
    أضف مكونات فوترة فردية إلى مشروعك:

    ```bash theme={null}
    npx @billingsdk/cli add pricing-table-one
    npx @billingsdk/cli add subscription-management
    ```
  </Step>
</Steps>

## الأطر المدعومة

يدعم SDK الفوترة عدة أطر مع تكامل شامل مع مدفوعات دودي:

| الإطار     | مدفوعات دودي |
| ---------- | ------------ |
| Next.js    | ✅ نعم        |
| Express.js | ✅ نعم        |
| Hono       | ✅ نعم        |
| React      | ✅ نعم        |
| Fastify    | ✅ نعم        |

## أوامر CLI

### `@billingsdk/cli init`

تهيئة مشروع فوترة جديد مع إعداد كامل بما في ذلك تكوين الإطار، تكامل مدفوعات دودي، والاعتماديات الأساسية.

**ما الذي يفعله:**

1. **اختيار الإطار**: اختر إطار العمل المفضل لديك
2. **تثبيت القالب**: يقوم بتنزيل وتثبيت قوالب محددة للإطار مع تكامل مدفوعات دودي
3. **إدارة الاعتماديات**: يقوم تلقائيًا بتثبيت الاعتماديات المطلوبة
4. **إنشاء الملفات**: ينشئ ملفات التكوين الضرورية وكود البداية

**مثال:**

```bash theme={null}
npx @billingsdk/cli init
```

### `@billingsdk/cli add`

أضف مكونات فوترة فردية إلى مشروعك الحالي باستخدام نظام تسجيل shadcn/ui.

**أمثلة:**

```bash theme={null}
# Add a pricing table
npx @billingsdk/cli add pricing-table-one

# Add subscription management
npx @billingsdk/cli add subscription-management

# Add usage monitoring
npx @billingsdk/cli add usage-meter-circle
```

**ما الذي يحدث:**

1. يقوم بتنزيل تكوين المكون من السجل
2. يثبت ملفات المكون في دليل `components/billingsdk/`
3. يحدث تكوين مشروعك إذا لزم الأمر
4. يثبت أي تبعيات إضافية

## هيكل الملفات الناتجة

بعد تشغيل `init`، ستحصل على بنية مشروع كاملة تحتوي على:

* **مسارات API**: نقاط نهاية شاملة للدفع، العملاء، المنتجات، الاشتراكات، وwebhooks
* **خطافات**: خطافات React لعمليات الفوترة (إذا كنت تستخدم React/Next.js)
* **ملفات المكتبة**: تهيئة عميل موفر الدفع والأدوات المساعدة
* **تكوين البيئة**: ملفات متغيرة البيئة كمثال

### هيكل مثال Next.js

```
your-project/
├── app/api/
│   └── (dodopayments)/
│       ├── checkout/route.ts
│       ├── customer/route.ts
│       ├── customer/payments/route.ts
│       ├── customer/subscriptions/route.ts
│       ├── product/route.ts
│       ├── products/route.ts
│       └── webhook/route.ts
├── hooks/
│   └── useBilling.ts
├── lib/
│   └── dodopayments.ts
└── .env.example
```

## تكوين البيئة

قم بتكوين متغيرات البيئة الخاصة بك بعد التهيئة:

```bash theme={null}
# DodoPayments
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_ENVIRONMENT=test_mode
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_key_here

# App URL
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

<Warning>
  قم دائمًا بتخزين مفاتيح واجهة برمجة التطبيقات الخاصة بك بشكل آمن باستخدام متغيرات البيئة. لا تقم أبدًا بإدخالها في التحكم في الإصدارات.
</Warning>

## المكونات المتاحة

يوفر SDK الفوترة مجموعة شاملة من مكونات React:

* **جداول الأسعار**: عدة متغيرات لعرض أسعار المنتجات
* **إدارة الاشتراكات**: مكونات لإدارة اشتراكات العملاء
* **مراقبة الاستخدام**: مكونات بصرية لتتبع الفوترة المعتمدة على الاستخدام
* **مكونات الدفع**: تدفقات دفع مسبقة البناء
* **بوابة العملاء**: مكونات لخدمة العملاء الذاتية

## مفتوح المصدر

تم بناء SDK الفوترة على مبادئ مفتوحة المصدر:

* 🔍 **الشفافية**: رؤية كاملة لكيفية عمل المكونات
* 🤝 **المجتمع**: مبني من قبل المطورين، للمطورين
* 🔒 **الأمان**: الكود المفتوح يعني أمانًا أفضل من خلال مراجعة الأقران
* 📈 **الابتكار**: تكرار أسرع من خلال مساهمات المجتمع

<Info>
  يتم إصدار Billing SDK بموجب رخصة جنو العمومية العامة (GPL)، مما يضمن بقاء المشروع مفتوحًا ومجانيًا.
</Info>

## الحصول على المساعدة

تحتاج إلى مساعدة بشأن SDK الفوترة؟

* **مشاكل GitHub**: [افتح مشكلة](https://github.com/dodopayments/billingsdk/issues)
* **التوثيق**: زيارة [billingsdk.com/docs](https://billingsdk.com/docs)
* **التوثيق الكامل لـ LLMs**: [billingsdk.com/llms-full.txt](https://billingsdk.com/llms-full.txt)

## المساهمة

نرحب بالمساهمات! راجع [دليل المساهمة](https://billingsdk.com/docs/contribution-open-source) للحصول على تفاصيل حول:

* الإبلاغ عن الأخطاء
* طلب الميزات
* تقديم طلبات السحب
* إضافة مكونات جديدة
* تحسين التوثيق

## تعرف على المزيد

<CardGroup cols={3}>
  <Card title="Full Documentation" icon="book" href="https://billingsdk.com/docs">
    دليل كامل لـ Billing SDK مع أمثلة وأفضل الممارسات
  </Card>

  <Card title="CLI Reference" icon="terminal" href="https://billingsdk.com/docs/cli">
    توثيق CLI مفصل لجميع الأوامر والخيارات
  </Card>

  <Card title="Component Library" icon="boxes-stacked" href="https://billingsdk.com/docs/components">
    تصفح جميع المكونات المتوفرة مع أمثلة مباشرة
  </Card>
</CardGroup>