> ## 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.

# منتج عرض أطلس

> استكشف أطلس، تطبيق عرض كامل الوظائف لتوليد الفن باستخدام الذكاء الاصطناعي، يعرض نماذج الفوترة المعتمدة على الاستخدام، الاشتراكات، والمدفوعات لمرة واحدة مع تكامل عملية الدفع من دودي بايمنتس.

<Frame>
  <img alt="منتج أطلس التوضيحي - منصة توليد الفن بالذكاء الاصطناعي مع الفوترة المدمجة" src="https://mintcdn.com/dodopayments/kx9B5HGzBgLxFWey/images/atlas/atlas-demo-product.png?fit=max&auto=format&n=kx9B5HGzBgLxFWey&q=85&s=df07b04779a208c9e7a6a81e19c97f58" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1556" data-path="images/atlas/atlas-demo-product.png" />
</Frame>

أطلس هو تطبيق عرض كامل الوظائف من دودي بايمنتس يعرض منصة لتوليد الفن باستخدام الذكاء الاصطناعي. يُظهر جميع نماذج الفوترة الثلاثة—**فوترة معتمدة على الاستخدام**، **مدفوعات لمرة واحدة**، و**اشتراكات**—مع تدفقات دفع متكاملة.

<Info>
  **العرض المباشر**: زر [atlas.dodopayments.com](https://atlas.dodopayments.com/) لاستكشاف المنصة وتجربة جميع تدفقات الفوترة.
</Info>

## نظرة عامة

أطلس يحاكي منصة حقيقية لتوليد الفن باستخدام الذكاء الاصطناعي حيث يمكن للمستخدمين إنشاء صور من نصوص. يبرز العرض ثلاث تدفقات شراء متميزة، كل منها يُظهر نماذج فوترة وتجارب دفع مختلفة:

* **فوترة معتمدة على الاستخدام**: الدفع لكل صورة تم إنشاؤها (0.75 دولار لكل صورة)
* **اشتراك**: خطة برو غير محدودة (20 دولارًا شهريًا)
* **شراء لمرة واحدة**: حزم ائتمانية (7 دولارات مقابل 10 ائتمانات)

بعد إتمام أي عملية شراء، يتم إعادة توجيه المستخدمين إلى **لوحة تحكم استوديو أطلس** حيث يمكنهم توليد الأعمال الفنية وتتبع استخدامهم في الوقت الفعلي.

## تدفقات الشراء

يظهر أطلس ثلاث تدفقات فوترة منفصلة. كل تدفق يتبع نمطًا مشابهًا ولكنه يُظهر تجارب دفع ونماذج فوترة مختلفة.

<Tabs>
  <Tab title="Usage-Based Billing">
    <Steps>
      <Step title="Select pay-per-image pricing">
        اختر خيار **الدفع حسب الصورة** (0.75 دولارًا لكل صورة) لتوليد فنون الذكاء الاصطناعي. هذا يوضح نموذج الفوترة القائمة على الاستخدام حيث يدفع العملاء فقط مقابل ما يستهلكونه.
      </Step>

      <Step title="Generate artwork">
        أدخل وصفًا نصيًا وقم بتوليد صورة. يقوم النظام بتتبع الاستخدام تلقائيًا لأغراض الفوترة.
      </Step>

      <Step title="Complete checkout">
        تتضمن عملية الدفع ما يلي:

        * **صفحة دفع مخصصة**: تعرض صفحة دفع دودي بايمنتس اسم علامتك التجارية وشعارك
        * **معلومات العميل**: أدخل تفاصيل المستخدم وعنوان الفوترة
        * **حساب الضرائب**: يتم حساب الضرائب تلقائيًا بعد تأكيد العنوان
        * **الدفع**: أدخل تفاصيل بطاقة الاختبار لإتمام المعاملة

        <Tip>
          استخدم بطاقة اختبار `4242 4242 4242 4242` مع أي تاريخ انتهاء مستقبلي ورمز CVC لمحاكاة المعاملات الناجحة.
        </Tip>
      </Step>

      <Step title="View confirmation">
        بعد الدفع، تعرض أطلس شاشة تأكيد مع تفاصيل الاستخدام والرصيد المتبقي.
      </Step>

      <Step title="Access dashboard">
        يتم إعادة توجيه المستخدمين مرة أخرى إلى **لوحة تحكم Atlas Studio** حيث يمكنهم مواصلة توليد الأعمال الفنية ومراقبة تتبع الاستخدام.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Subscription">
    <Steps>
      <Step title="Select subscription plan">
        اختر خطة الاشتراك **Unlimited Pro** (20 دولارًا شهريًا) لتوليد فنون الذكاء الاصطناعي بلا حدود.
      </Step>

      <Step title="Generate artwork">
        أدخل وصفًا وقم بتوليد صورة لاختبار المنصة قبل الاشتراك.
      </Step>

      <Step title="Complete checkout">
        تتضمن عملية دفع الاشتراك ما يلي:

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

        <Note>
          يتم تجديد الاشتراكات تلقائيًا كل شهر. يمكن للمستخدمين إدارة اشتراكهم من لوحة التحكم بعد الشراء.
        </Note>
      </Step>

      <Step title="View confirmation">
        بعد الدفع، تعرض أطلس شاشة تأكيد مع تفاصيل تفعيل الاشتراك وتاريخ الفوترة التالي.
      </Step>

      <Step title="Access dashboard">
        يتم إعادة توجيه المستخدمين إلى **لوحة تحكم Atlas Studio** مع وصول غير محدود لتوليد الأعمال الفنية.
      </Step>
    </Steps>
  </Tab>

  <Tab title="One-Time Purchase">
    <Steps>
      <Step title="Select credit pack">
        اختر **حزمة رصيد** (7 دولارات مقابل 10 أرصدة) لتوليد فنون الذكاء الاصطناعي. هذا يوضح معاملات الشراء لمرة واحدة.
      </Step>

      <Step title="Generate artwork">
        أدخل وصفًا وقم بتوليد صورة لمعاينة المنصة قبل شراء الأرصدة.
      </Step>

      <Step title="Complete checkout">
        تتضمن عملية دفع الشراء لمرة واحدة ما يلي:

        * **صفحة الدفع المعلمة**: صفحة دفع Dodo Payments مع علامة التاجر التجارية
        * **معلومات العميل**: إدخال تفاصيل المستخدم وعنوان الفوترة
        * **حساب الضريبة**: حساب الضريبة تلقائيًا بعد تأكيد العنوان
        * **الدفع**: إدخال تفاصيل بطاقة اختبار لإتمام الشراء
      </Step>

      <Step title="View confirmation">
        بعد الدفع، تعرض أطلس شاشة تأكيد مع رسالة "شكرًا لك" وتفاصيل الأرصدة المشتراة.
      </Step>

      <Step title="Access dashboard">
        يُعاد توجيه المستخدمين إلى **لوحة تحكم Atlas Studio** حيث تكون الأرصدة المشتراة متاحة فورًا لتوليد الأعمال الفنية.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## تجربة لوحة التحكم بعد الشراء

تظهر لوحة تحكم استوديو أطلس كيفية تنفيذ ميزات الوعي بالفوترة وتتبع الحقوق بعد إتمام عملية الدفع.

### ميزات لوحة التحكم

* **وصول فوري**: يمكن للمستخدمين البدء في توليد الأعمال الفنية على الفور بعد الشراء
* **تتبع الاستخدام**: عرض في الوقت الفعلي للاعتمادات المتبقية، الاشتراكات النشطة، وتاريخ التوليد
* **إدارة الفوترة**: عرض تاريخ الشراء، حالة الاشتراك، والتجديدات القادمة
* **تكامل سلس**: يُظهر كيفية إعادة توجيه المستخدمين إلى تطبيقك مع تتبع الحقوق بشكل صحيح

<Check>
  تجربة لوحة التحكم تعرض أفضل الممارسات لتدفقات ما بعد الشراء، بما في ذلك التحقق من الاستحقاقات ومراقبة الاستخدام.
</Check>

## التنفيذ الفني

تم بناء أطلس باستخدام [Dodo Payments TypeScript SDK](/developer-resources/sdks/typescript)، مما يُظهر كيفية دمج تدفقات الفوترة مع بضع أسطر من التعليمات البرمجية فقط.

<CardGroup cols={2}>
  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    تعرف على كيفية دمج تدفقات دفع Dodo Payments في تطبيقك.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/developer-resources/sdks/typescript">
    استكشف وثائق TypeScript SDK ومرجع واجهة برمجة التطبيقات.
  </Card>
</CardGroup>

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

أطلس هو مشروع مفتوح المصدر. استكشف قاعدة الشيفرة لترى كيف تم تنفيذ تدفقات الفوترة في تطبيق حقيقي.

<Card title="View on GitHub" icon="github" href="https://github.com/dodopayments/dodo-checkout-demo.git">
  تصفح شفرة مصدر أطلس وتعلم من التنفيذ.
</Card>