Inline Checkout

تضمّن صفحة الدفع المضمّنة نموذج دفع آمنًا مباشرةً في تخطيط صفحتك. بخلاف الدفع عبر النافذة المنبثقة، الذي يُفتح كنافذة حوار، تصبح صفحة الدفع المضمّنة جزءًا من صفحتك. يمكنك التحكم في التخطيط وعرض ملخص الطلب الخاص بك إلى جانب نموذج الدفع.

نموذج دفع مضمّن داخل صفحة منتج مع ملخص الطلب

كيفية عمله

تعرض صفحة الدفع المضمّنة إطار Dodo Payments آمنًا داخل حاوية في صفحتك. يتولى الإطار جمع معلومات العميل وتفاصيل الدفع. بينما تعرض صفحتك العناصر والإجماليات والمعلومات الأخرى. تتيح حزمة SDK لصفحتك وإطار الدفع التواصل مع بعضهما. عند اكتمال الدفع، تنشئ Dodo Payments عملية الدفع، أو الاشتراك للمنتج القائم على الاشتراك، وترسل webhook حتى تتمكن من تفعيل الوصول.

يتولى إطار الدفع المضمّن معالجة جميع معلومات الدفع الحساسة بأمان، بما يضمن الامتثال لمعيار PCI دون الحاجة إلى شهادة إضافية من جانبك.

ما الذي يجعل صفحة الدفع المضمّنة جيدة؟

يحتاج العملاء إلى معرفة الجهة التي يشترون منها، وما يشترونه، والمبلغ الذي يدفعونه. يجب أن يتضمن التنفيذ الخاص بك ما يلي:

مثال على صفحة دفع مضمّنة مع تسمية العناصر المطلوبة — Example inline checkout layout showing required elements

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

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

رحلة العميل

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

Customer opens checkout

تفتح صفحة الدفع المضمّنة عبر تمرير عنوان URL للدفع. استخدم أحداث SDK، مثل checkout.breakdown، لعرض المعلومات الموجودة على الصفحة وتحديثها.

صفحة الدفع الأولية مع قائمة العناصر ونموذج الدفع

Customer enters their details

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

Customer selects payment method

بعد إدخال تفاصيلهم، تظهر للعملاء طرق الدفع المتاحة ونموذج الدفع. قد تتضمن الخيارات بطاقة ائتمان أو خصم، وPayPal، وApple Pay، وGoogle Pay، وطرق دفع محلية أخرى بناءً على موقعهم.اعرض طرق الدفع المحفوظة، إن توفرت، لتسريع عملية الدفع.

Checkout completed

توجّه Dodo Payments كل عملية دفع إلى أفضل جهة تحصيل لهذه المعاملة للحصول على أعلى فرصة نجاح ممكنة. ويدخل العملاء في سير عمل للنجاح يمكنك إنشاؤه.

Dodo Payments creates the payment or subscription

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

البدء السريع

ثبّت حزمة SDK، وهيّئها للوضع المضمّن، وافتح صفحة الدفع داخل عنصر حاوية:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

تأكد من وجود عنصر حاوية يحمل id المطابق في صفحتك: <div id="dodo-inline-checkout"></div>.

التكامل خطوة بخطوة

Install the SDK

ثبّت الحزمة باستخدام npm أو yarn أو pnpm:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

هيّئ حزمة SDK وحدد displayType: 'inline'. استمع إلى حدث checkout.breakdown لتحديث واجهة المستخدم بالحسابات الفورية للضرائب والإجمالي:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Create a Container Element

أضف عنصرًا إلى HTML حيث سيتم حقن إطار الدفع:

<div id="dodo-inline-checkout"></div>

Open the Checkout

استدعِ DodoPayments.Checkout.open() باستخدام checkoutUrl وelementId الخاصين بالحاوية:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Test Your Integration

ابدأ خادم التطوير:

npm run dev

اختبر تدفق الدفع:
- أدخل بريدك الإلكتروني وتفاصيل عنوانك في الإطار المضمّن
- تحقّق من تحديث ملخص الطلب المخصص في الوقت الفعلي
- اختبر تدفق الدفع باستخدام بيانات الاعتماد التجريبية
- تأكد من عمل عمليات إعادة التوجيه بشكل صحيح

يجب أن ترى أحداث checkout.breakdown مسجلة في وحدة تحكم المتصفح إذا أضفت سجلًا إلى وحدة التحكم في استدعاء onEvent.

Go Live

عندما تكون مستعدًا للإنتاج:

غيّر الوضع إلى 'live':

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

حدّث عناوين URL للدفع لاستخدام جلسات الدفع المباشرة من الواجهة الخلفية
اختبر التدفق الكامل في بيئة الإنتاج

مثال React كامل

يوضح هذا المثال كيفية تنفيذ ملخص طلب مخصص إلى جانب صفحة الدفع المضمّنة، مع إبقائهما متزامنين باستخدام حدث checkout.breakdown:

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.checkout.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal != null && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount != null && breakdown.discount > 0 && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) != null && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

مرجع API

التهيئة

استدعِ Initialize مرة واحدة لإعداد حزمة SDK:

interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}

DodoPayments.Initialize(options);

الخيار	النوع	مطلوب	الوصف
`mode`	`"test" \| "live"`	نعم	وضع البيئة.
`displayType`	`"inline" \| "overlay"`	نعم	يجب تعيينه إلى `"inline"` لتضمين صفحة الدفع.
`onEvent`	`function`	نعم	دالة callback لمعالجة أحداث الدفع.

فتح صفحة الدفع

افتح إطار الدفع داخل حاوية:

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

DodoPayments.Checkout.open(options);

الخيار	النوع	مطلوب	الوصف
`checkoutUrl`	`string`	نعم	عنوان URL لجلسة الدفع من create checkout session API
`elementId`	`string`	نعم	`id` لعنصر DOM الذي يجب عرض الدفع فيه
`options.showTimer`	`boolean`	لا	إظهار مؤقت الجلسة أو إخفاؤه. القيمة الافتراضية هي `true`. عند تعيينه إلى `false`، تتلقى حدث `checkout.link_expired` عند انتهاء الجلسة.
`options.showSecurityBadge`	`boolean`	لا	إظهار شارة الأمان أو إخفاؤها. القيمة الافتراضية هي `true`
`options.manualRedirect`	`boolean`	لا	عند تعيينه إلى `true`، يمنع عمليات إعادة التوجيه التلقائية. يصدر الدفع الحدث `checkout.status` مع نتيجة الدفع والحدث `checkout.redirect_requested` مع عنوان URL المطلوب فتحه، وتتولى أنت التنقل.
`options.payButtonText`	`string`	لا	نص مخصص لزر الدفع
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	لا	حجم الخط العام لصفحة الدفع
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	لا	وزن الخط العام لصفحة الدفع

إغلاق صفحة الدفع

أزل إطار الدفع برمجيًا ونظّف مستمعي الأحداث:

DodoPayments.Checkout.close();

التحقق من الحالة

تحقّق مما إذا كان إطار الدفع محقونًا حاليًا:

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

الأحداث

توفر حزمة SDK أحداثًا فورية من خلال استدعاء onEvent. وبالنسبة إلى الدفع المضمّن، يُعد checkout.breakdown مفيدًا بشكل خاص لمزامنة واجهة المستخدم:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Frame has loaded
        break;
      case "checkout.form_ready":
        // Form is ready for user input
        break;
      case "checkout.breakdown":
        // Prices, taxes, or discounts updated
        break;
      case "checkout.customer_details_submitted":
        // Customer details submitted
        break;
      case "checkout.pay_button_clicked":
        // Customer clicked pay button
        break;
      case "checkout.redirect":
        // Checkout will redirect
        break;
      case "checkout.error":
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Session expired (only when showTimer is false)
        break;
    }
  }
});

الحدث	الوصف
`checkout.opened`	تم تحميل إطار الدفع
`checkout.form_ready`	النموذج جاهز لإدخال المستخدم. استخدمه لإخفاء حالات التحميل
`checkout.breakdown`	تم تحديث الأسعار أو الضرائب أو الخصومات
`checkout.customer_details_submitted`	تم إرسال تفاصيل العميل
`checkout.pay_button_clicked`	نقر العميل على زر الدفع. مفيد للتحليلات وتتبع مسارات التحويل
`checkout.redirect`	ستتم إعادة توجيه الدفع، مثلًا إلى صفحة مصرفية
`checkout.error`	حدث خطأ أثناء الدفع
`checkout.link_expired`	انتهت صلاحية جلسة الدفع. لا يتم تلقيه إلا عند تعيين `showTimer` إلى `false`

بيانات تفصيل الدفع

يوفر حدث checkout.breakdown معلومات الأسعار والضرائب:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;          // Amount in cents
  tax?: number;               // Amount in cents
  total?: number;             // Amount in cents
  currency?: string;          // e.g., "USD"
  finalTotal?: number;        // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

يُطلَق الحدث عند تحميل إطار الدفع، ومرة أخرى كلما أُعيد حساب السعر، مثلًا عندما يختار العميل بلدًا أو يُدخل رمزًا بريديًا يغيّر الضريبة. تفاصيل الحقول:

الحقل	الوصف
`subTotal`	مجموع جميع عناصر السطر قبل الخصومات أو الضرائب
`discount`	القيمة الإجمالية لجميع الخصومات المطبقة
`tax`	مبلغ الضريبة المحسوب. يتم تحديثه ديناميكيًا أثناء تفاعل المستخدم مع حقول العنوان
`total`	ناتج `subTotal - discount + tax` بعملة الجلسة الأساسية
`currency`	رمز العملة ISO، مثل `"USD"`، لقيم المجموع الفرعي والخصم والضريبة القياسية.
`finalTotal`	المبلغ الفعلي الذي يُحصّل من العميل. قد يشمل تعديلات إضافية على أسعار الصرف أو رسوم طرق الدفع المحلية التي لا تدخل ضمن تفصيل السعر الأساسي.
`finalTotalCurrency`	العملة التي يدفع بها العميل فعليًا. وقد تختلف عن `currency` إذا كانت مكافأة القوة الشرائية أو ميزة تحويل العملة المحلية نشطة.

نصائح التكامل:

تنسيق العملة: الأسعار أعداد صحيحة بوحدة العملة الأصغر، مثل السنتات في USD. بالنسبة إلى العملات ذات المنزلتين العشريتين، اقسم على 100 قبل التنسيق باستخدام Intl.NumberFormat. أما العملات التي لا تحتوي على منازل عشرية، مثل JPY، فلا تقسمها.
معالجة الحالات الأولية: عند تحميل الدفع لأول مرة، قد تكون tax وdiscount بقيمة 0 أو null إلى أن يقدم المستخدم معلومات الفوترة أو يطبق رمزًا. تعامل مع هذه الحالات بسلاسة، مثل عرض شرطة — أو إخفاء الصف.
«الإجمالي النهائي» مقابل «الإجمالي»: رغم أن total يوفر حساب السعر القياسي، فإن finalTotal هو مصدر الحقيقة للمعاملة. وإذا كان finalTotal موجودًا، فهو يعكس المبلغ الذي سيُحصّل بالضبط من بطاقة العميل.
الملاحظات الفورية: استخدم الحقل tax لإظهار أن الضرائب تُحسب في الوقت الفعلي. يمنح ذلك صفحة الدفع إحساسًا تفاعليًا ويقلل الاحتكاك أثناء إدخال العنوان.

التنفيذ عبر CDN

للتكامل السريع دون خطوة build، حمّل حزمة SDK من CDN:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dodo Payments Inline Checkout</title>
  
  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
  <script>
    DodoPaymentsCheckout.DodoPayments.Initialize({
      mode: "test",
      displayType: "inline",
      onEvent: (event) => {
        console.log('Checkout event:', event);
      }
    });
  </script>
</head>
<body>
  <div id="dodo-inline-checkout"></div>

  <script>
    DodoPaymentsCheckout.DodoPayments.Checkout.open({
      checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
      elementId: "dodo-inline-checkout"
    });
  </script>
</body>
</html>

تحديث طريقة الدفع

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

كيفية عمله

استدعِ Update Payment Method API للحصول على payment_link:

// On your server. `client` is the Dodo Payments server SDK (`new DodoPayments()` from the `dodopayments` package).
const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

مرّر payment_link المُعاد كقيمة checkoutUrl لفتح صفحة الدفع المضمّنة:

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

يعرض الإطار المضمّن نموذج جمع طريقة الدفع فقط. ويمكن للعملاء إدخال تفاصيل بطاقة جديدة أو اختيار طريقة دفع محفوظة دون مغادرة صفحتك.

للاشتراكات المعلّقة

عند تحديث طريقة الدفع لاشتراك حالته on_hold، تنشئ Dodo Payments تلقائيًا عملية تحصيل لأي مستحقات متبقية. راقب webhooks‏ payment.succeeded وsubscription.active لتأكيد إعادة التفعيل.

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

if (response.payment_id) {
  // Charge created for remaining dues
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

يمكنك أيضًا استخدام طريقة دفع محفوظة موجودة بدلًا من جمع تفاصيل جديدة، وذلك بتمرير type: 'existing' مع payment_method_id إلى Update Payment Method API.

معالجة الأخطاء

نفّذ دائمًا معالجة الأخطاء في استدعاء onEvent:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Show user-friendly error message
    }
  }
});

احرص دائمًا على معالجة حدث checkout.error لتوفير تجربة مستخدم جيدة عند حدوث الأخطاء.

أفضل الممارسات

التصميم المتجاوب: تأكد من أن عنصر الحاوية يتمتع بعرض وارتفاع كافيين. وعادةً ما يتمدد iframe لملء الحاوية.
المزامنة: استخدم حدث checkout.breakdown للحفاظ على تزامن ملخص الطلب المخصص أو جداول الأسعار مع ما يراه المستخدم في إطار الدفع.
حالات الهيكل: اعرض مؤشر تحميل في الحاوية إلى أن يُطلَق حدث checkout.opened.
التنظيف: استدعِ DodoPayments.Checkout.close() عند إلغاء تحميل المكوّن لتنظيف iframe ومستمعي الأحداث.

لتنفيذ الوضع الداكن، استخدم #0d0d0d كلون خلفية لتحقيق أفضل تكامل مرئي مع إطار الدفع المضمّن.

التحقق من حالة الدفع

لا تعتمد فقط على أحداث الدفع المضمّن لتحديد نجاح الدفع أو فشله. نفّذ دائمًا عملية تحقق من جانب الخادم باستخدام webhooks و/أو polling.

لماذا يُعد التحقق من جانب الخادم ضروريًا؟

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

استمع إلى أحداث webhook - ترسل Dodo Payments webhooks عند تغيّر حالة الدفع
نفّذ آلية polling - يجب أن تستعلم الواجهة الأمامية من خادمك عن تحديثات الحالة
اجمع بين النهجين - استخدم webhooks كمصدر أساسي وpolling كحل بديل

البنية المقترحة

خطوات التنفيذ

1. الاستماع إلى أحداث الدفع - عندما ينقر المستخدم على الدفع، ابدأ الاستعداد للتحقق من الحالة:

onEvent: (event) => {
  if (event.event_type === 'checkout.pay_button_clicked') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. الاستعلام من خادمك - أنشئ نقطة نهاية تتحقق من حالة الدفع في قاعدة بياناتك، والتي تحدّثها webhooks:

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. معالجة webhooks من جانب الخادم - حدّث قاعدة بياناتك عندما ترسل Dodo webhooks من النوع payment.succeeded أو payment.failed. راجع وثائق Webhooks للتفاصيل.

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

Checkout frame is not appearing

تحقّق من أن elementId يطابق id لعنصر div موجود فعليًا في DOM
تأكد من تمرير displayType: 'inline' إلى Initialize
تحقّق من صلاحية checkoutUrl

Taxes are not updating in my UI

تأكد من الاستماع إلى حدث checkout.breakdown
لا تُحسب الضرائب إلا بعد إدخال المستخدم بلدًا ورمزًا بريديًا صالحين في إطار الدفع

المحافظ الرقمية

للحصول على معلومات تفصيلية حول إعداد Apple Pay وGoogle Pay والمحافظ الرقمية الأخرى، راجع صفحة المحافظ الرقمية.

الإعداد السريع لـ Apple Pay

لا يلزم التحقق من النطاق إلا للدفع المضمّن. ولا يلزم للدفع المستضاف.

لا يتوفر Apple Pay للدفع عبر النافذة المنبثقة.

يتم التحقق من Apple Pay لكل نطاق من لوحة التحكم.

Open Wallet domains

انتقل إلى Settings → Payment Methods، ثم انقر على Manage domains في صف Apple Pay.

زر Manage domains في صف Apple Pay ضمن إعدادات Payment Methods — Open Wallet domains from the Apple Pay row

Download the domain association file

من لوحة Wallet domains، نزّل ملف association.

لوحة Wallet domains مع زر Download file — Download the Apple Pay domain association file

انقر على Register domain وأدخل النطاق الذي تضمّن فيه صفحة الدفع المضمّنة، مثل shop.example.com، ثم انقر على Continue.

نموذج Register a domain مع إدخال نطاق — Register the domain where you embed inline checkout

Host the file on your domain

استضفه في:

https://shop.example.com/.well-known/apple-developer-merchantid-domain-association

يجب تقديمه عبر HTTPS، وأن يكون قابلًا للوصول دون عمليات إعادة توجيه، وأن يُقدّم باستخدام Content-Type: application/octet-stream أو text/plain.

Verify the domain

انقر على Verify domain. تؤكد Dodo Payments أن الملف متاح وترسل نطاقك إلى Apple.

شاشة Verify your domain مع مسار استضافة ملف association وزر Verify domain — Verify the hosted association file

Confirm it's active

عندما تظهر الحالة Active، يكون Apple Pay مفعّلًا لهذا النطاق. استخدم مفتاح Enabled لتفعيله أو تعطيله لكل نطاق.

قائمة Wallet domains التي تعرض نطاقات بحالة Apple Pay‏ Active ومفاتيح Enabled — Verified domains show an Active status

Test the integration

افتح صفحة الدفع على جهاز Apple
تحقّق من ظهور زر Apple Pay
أجرِ معاملة تجريبية

دعم المتصفحات

تدعم حزمة Checkout SDK من Dodo Payments ما يلي:

Chrome (أحدث إصدار)
Firefox (أحدث إصدار)
Safari (أحدث إصدار)
Edge (أحدث إصدار)
IE11+

الدفع المضمّن مقابل الدفع عبر النافذة المنبثقة

اختر نوع الدفع المناسب لحالة الاستخدام الخاصة بك:

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

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

الموارد ذات الصلة

Overlay Checkout

استخدم الدفع عبر النافذة المنبثقة لتكامل سريع قائم على النوافذ الحوارية.

Checkout Sessions API

أنشئ جلسات دفع لتشغيل تجارب الدفع الخاصة بك.

Webhooks

عالج أحداث الدفع من جانب الخادم باستخدام webhooks.

Integration Guide

دليل كامل لتكامل Dodo Payments.

لمزيد من المساعدة، تفضل بزيارة مجتمع Discord أو تواصل مع فريق دعم المطورين لدينا.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

كيفية عمله

ما الذي يجعل صفحة الدفع المضمّنة جيدة؟

رحلة العميل

البدء السريع

التكامل خطوة بخطوة

مثال React كامل

مرجع API

التهيئة

فتح صفحة الدفع

إغلاق صفحة الدفع

التحقق من الحالة

الأحداث

بيانات تفصيل الدفع

التنفيذ عبر CDN

تحديث طريقة الدفع

كيفية عمله

للاشتراكات المعلّقة

معالجة الأخطاء

أفضل الممارسات

التحقق من حالة الدفع

لماذا يُعد التحقق من جانب الخادم ضروريًا؟

البنية المقترحة

خطوات التنفيذ

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

المحافظ الرقمية

الإعداد السريع لـ Apple Pay

دعم المتصفحات

الدفع المضمّن مقابل الدفع عبر النافذة المنبثقة

الموارد ذات الصلة

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

​كيفية عمله

​ما الذي يجعل صفحة الدفع المضمّنة جيدة؟

​رحلة العميل

​البدء السريع

​التكامل خطوة بخطوة

​مثال React كامل

​مرجع API

​التهيئة

​فتح صفحة الدفع

​إغلاق صفحة الدفع

​التحقق من الحالة

​الأحداث

​بيانات تفصيل الدفع

​التنفيذ عبر CDN

​تحديث طريقة الدفع

​كيفية عمله

​للاشتراكات المعلّقة

​معالجة الأخطاء

​أفضل الممارسات

​التحقق من حالة الدفع

​لماذا يُعد التحقق من جانب الخادم ضروريًا؟

​البنية المقترحة

​خطوات التنفيذ

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

​المحافظ الرقمية

​الإعداد السريع لـ Apple Pay

​دعم المتصفحات

​الدفع المضمّن مقابل الدفع عبر النافذة المنبثقة

​الموارد ذات الصلة

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

كيفية عمله

ما الذي يجعل صفحة الدفع المضمّنة جيدة؟

رحلة العميل

البدء السريع

التكامل خطوة بخطوة

مثال React كامل

مرجع API

التهيئة

فتح صفحة الدفع

إغلاق صفحة الدفع

التحقق من الحالة

الأحداث

بيانات تفصيل الدفع

التنفيذ عبر CDN

تحديث طريقة الدفع

كيفية عمله

للاشتراكات المعلّقة

معالجة الأخطاء

أفضل الممارسات

التحقق من حالة الدفع

لماذا يُعد التحقق من جانب الخادم ضروريًا؟

البنية المقترحة

خطوات التنفيذ

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

المحافظ الرقمية

الإعداد السريع لـ Apple Pay

دعم المتصفحات

الدفع المضمّن مقابل الدفع عبر النافذة المنبثقة

الموارد ذات الصلة