إعداد طريقة دفع

تبدأ معاملة الدفع باستخدام Web Payments باكتشاف تطبيق الدفع الخاص بك. تعرَّف على كيفية إعداد طريقة دفع وتجهيز تطبيق الدفع الخاص بك للتجّار والعملاء لإجراء الدفعات.

Eiji Kitamura

تاريخ النشر: 27 سبتمبر 2017، تاريخ آخر تعديل: 16 أكتوبر 2026

لاستخدام تطبيق الدفع مع واجهة Payment Request API، يجب ربطه بمعرّف طريقة الدفع. سيستخدم التجّار الذين يريدون التكامل مع تطبيق دفع معرّف طريقة الدفع للإشارة إلى ذلك في المتصفّح. تتناول هذه المقالة آلية عمل ميزة "اكتشاف تطبيقات الدفع" وكيفية ضبط تطبيق الدفع ليتم اكتشافه واستدعاؤه بشكل صحيح من خلال المتصفّح.

إذا كنت مبتدئًا في مجال الدفع على الويب، ننصحك بقراءة نظرة عامة على الدفع على الويب أولاً.

أنواع تطبيقات الدفع

يمكن أن تكون طريقة الدفع متوافقة مع تطبيق دفع على Android أو تطبيق دفع مستنِد إلى الويب أو كليهما:

• تطبيق الدفع على Android: هو تطبيق مثبّت يشغّله Chrome باستخدام Android intent. يتحقّق Chrome من اسم حزمة التطبيق وشهادة التوقيع.
• تطبيق الدفع المستنِد إلى الويب: هو مشغّل خدمات يفتحه Chrome في نافذة مشروطة. لا يحتاج المستخدمون إلى تثبيت أي شيء.

تتوفّر تطبيقات الدفع على Android في Chrome على Android وفي WebView. تتوفّر تطبيقات الدفع المستندة إلى الويب في Chrome على جميع الأنظمة الأساسية، ولكن ليس في WebView.

إذا كان كلا نوعَي التطبيقات متاحَين لطريقة دفع معيّنة وكان بيان تطبيق الويب يضبط prefer_related_applications على true، سيخفي Chrome تطبيق الدفع المستنِد إلى الويب. وبخلاف ذلك، قد يرى المستخدمون كلا التطبيقَين في واجهة مستخدم طلب الدفع ويختارون بينهما.

دعم المتصفح

تتكوّن Web Payments من بعض التقنيات المختلفة وتعتمد حالة الدعم على المتصفّح.

كيفية عثور المتصفّح على تطبيق للدفع

يجب أن يوفّر كل تطبيق دفع ما يلي:

• معرّف طريقة الدفع المستند إلى عنوان URL
• بيان طريقة الدفع (إلا إذا قدّمت جهة خارجية معرّف طريقة الدفع)
• ملف بيان تطبيق الويب

تبدأ عملية الاكتشاف عندما يبدأ التاجر معاملة:

1. يرسل المتصفّح طلبًا إلى عنوان URL الخاص بمعرّف طريقة الدفع ويجلب بيان طريقة الدفع.
2. يحدّد المتصفّح عنوان URL الخاص ببيان تطبيق الويب من بيان طريقة الدفع ويجلب بيان تطبيق الويب.
3. يحدّد المتصفّح ما إذا كان سيتم تشغيل تطبيق الدفع الخاص بنظام التشغيل أو تطبيق الدفع المستنِد إلى الويب من بيان تطبيق الويب.

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

الخطوة 1: تقديم معرّف طريقة الدفع

معرّف طريقة الدفع هو سلسلة مستندة إلى عنوان URL. على سبيل المثال، معرّف Google Pay هو https://google.com/pay. يمكن لمطوّري تطبيقات الدفع اختيار أي عنوان URL كمعرّف لطريقة الدفع طالما أنّهم يتحكّمون فيه ويمكنهم عرض محتوى عشوائي وعناوين HTTP. في هذه المقالة، سنستخدم https://bobbucks.dev/pay كمعرّف لطريقة الدفع.

كيفية استخدام التجّار لمعرّف طريقة الدفع

يتم إنشاء عنصر PaymentRequest باستخدام قائمة معرّفات طرق الدفع التي تحدّد تطبيقات الدفع التي يقرّر التاجر قبولها. يتم ضبط معرّفات طرق الدفع كقيمة للسمة supportedMethods. على سبيل المثال:

يطلب [merchant] الدفع:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

الخطوة 2: عرض بيان طريقة الدفع

بيان طريقة الدفع هو ملف JSON يحدّد تطبيق الدفع الذي يمكنه استخدام طريقة الدفع هذه.

تقديم بيان طريقة الدفع

عندما يبدأ تاجر معاملة دفع، يرسل المتصفّح طلب HTTP HEAD إلى عنوان URL الخاص بمعرّف طريقة الدفع. يستجيب عنوان URL لمعرّف طريقة الدفع باستخدام عنوان HTTP Link يشير إلى عنوان URL الذي يمكن للمتصفّح من خلاله جلب بيان طريقة الدفع.

اضبط خادم طريقة الدفع للاستجابة باستخدام عنوان HTTP Link مع السمة rel="payment-method-manifest" وعنوان URL لـ بيان طريقة الدفع. على سبيل المثال، إذا كان ملف البيان على الرابط https://bobbucks.dev/pay/payment-manifest.json، سيتضمّن عنوان الاستجابة ما يلي:

Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"

يمكن أن يكون عنوان URL اسم نطاق مؤهَّلاً بالكامل أو مسارًا نسبيًا. يمكنك فحص https://bobbucks.dev/pay بحثًا عن حركة بيانات الشبكة للاطّلاع على مثال. يمكنك أيضًا استخدام أمر curl:

curl --include https://bobbucks.dev/pay

بعد ذلك، يرسل المتصفّح طلب HTTP GET إلى عنوان URL لبيان طريقة الدفع. يستجيب الخادم ببيان طريقة الدفع.

يتضمّن بيان طريقة الدفع حقلَين، هما default_applications وsupported_origins.

يجب أن يظهر ملف بيان طريقة الدفع على النحو التالي:

[payment handler] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

عندما يقرأ المتصفّح الحقل default_applications، يعثر على قائمة روابط تؤدي إلى بيانات تطبيقات الويب لتطبيقات الدفع المتوافقة.

الخطوة 3: عرض ملف بيان تطبيق الويب

يُستخدم بيان تطبيق الويب لتعريف تطبيق الويب كما يشير الاسم. وهو ملف بيان يُستخدم على نطاق واسع لتعريف تطبيق الويب التقدّمي (PWA).

سيبدو بيان تطبيق الويب العادي على النحو التالي:

[payment handler] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

يقرأ Chrome حقولاً مختلفة حسب نوع تطبيق الدفع. بالنسبة إلى تطبيق الدفع على Android، يقرأ Chrome حقل related_applications فقط. بالنسبة إلى تطبيق الدفع المستنِد إلى الويب، يقرأ Chrome name وicons وserviceworker وpayment وprefer_related_applications.

يتم استخدام السمة name في بيان تطبيق الويب كاسم لتطبيق الدفع، ويتم استخدام السمة icons كرمز لتطبيق الدفع.

كيفية تحديد Chrome لتطبيق الدفع الذي سيتم تشغيله

تشغيل تطبيق الدفع الخاص بالمنصة

لتشغيل تطبيق الدفع الخاص بالمنصة، يجب استيفاء الشروط التالية:

• يتم تحديد حقل related_applications في بيان تطبيق الويب و:
  • يتطابق معرّف حزمة التطبيق المثبّت وتوقيعه، في حين أنّ الحدّ الأدنى للإصدار (min_version) في بيان تطبيق الويب أقل من أو يساوي إصدار التطبيق المثبّت.
• تثبيت تطبيق الدفع الخاص بالمنصة واستيفاؤه للشروط التالية:
  • فلتر intent filter لـ org.chromium.intent.action.PAY
  • معرّف طريقة الدفع المحدّد كقيمة للسمة org.chromium.default_payment_method_name

يمكنك الاطّلاع على تطبيقات الدفع على Android: دليل المطوّر لمزيد من التفاصيل حول كيفية إعدادها.

[payment handler] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

إذا كانت قيمة prefer_related_applications هي true وكان تطبيق الدفع الخاص بالنظام الأساسي متاحًا، سيخفي Chrome تطبيق الدفع المستنِد إلى الويب. وإلا، سيبحث Chrome أيضًا عن تطبيق الدفع المستنِد إلى الويب.

تشغيل تطبيق الدفع المستنِد إلى الويب

يجب تحديد تطبيق الدفع المستنِد إلى الويب في حقل serviceworker في بيان تطبيق الويب.

[payment handler] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

يُطلق المتصفّح تطبيق الدفع المستند إلى الويب من خلال إرسال حدث paymentrequest إلى مشغّل الخدمات. ولا يلزم تسجيل مشغّل الخدمات مسبقًا. يمكن تسجيله في الوقت المناسب.

فهم التحسينات الخاصة

كيف يمكن للمتصفّحات تخطّي واجهة مستخدم Payment Request وإطلاق تطبيق للدفع مباشرةً

في Chrome، عند استدعاء طريقة show() من PaymentRequest، تعرض واجهة برمجة التطبيقات Payment Request API واجهة مستخدم يوفّرها المتصفّح تُعرف باسم "واجهة مستخدم طلب الدفع". تتيح واجهة المستخدم هذه للمستخدمين اختيار تطبيق للدفع. بعد الضغط على الزر متابعة في واجهة مستخدم طلب الدفع، يتم تشغيل تطبيق الدفع المحدّد.

يؤدي عرض واجهة مستخدم Payment Request قبل تشغيل تطبيق للدفع إلى زيادة عدد الخطوات التي يحتاجها المستخدم لإتمام عملية الدفع. لتحسين العملية، يمكن للمتصفّح تفويض تنفيذ هذه المعلومات إلى تطبيقات الدفع وتشغيل تطبيق دفع مباشرةً بدون عرض واجهة مستخدم طلب الدفع عند استدعاء show().

لتشغيل تطبيق دفع مباشرةً، يجب استيفاء الشروط التالية:

• يتم تشغيل show() من خلال إجراء تفاعلي من المستخدم (على سبيل المثال، نقرة بالماوس).
• هناك تطبيق دفع واحد فقط:
  • يتيح معرّف طريقة الدفع المطلوبة.
  • يتيح كل معلومات الشحن والاتصال التي يطلبها التاجر.

متى يتم تسجيل تطبيق دفع مستند إلى الويب في الوقت المناسب؟

يمكن تشغيل تطبيقات الدفع المستندة إلى الويب بدون زيارة المستخدم السابقة الصريحة لموقع تطبيق الدفع الإلكتروني وتسجيل مشغّل الخدمات. يمكن تسجيل مشغّل الخدمات في الوقت المناسب عندما يختار المستخدم الدفع باستخدام تطبيق الدفع المستند إلى الويب. هناك نوعان مختلفان من توقيت التسجيل:

• إذا ظهرت واجهة مستخدم Payment Request للمستخدم، يتم تسجيل التطبيق في الوقت المناسب وتشغيله عندما ينقر المستخدم على متابعة.
• في حال تخطّي واجهة مستخدم Payment Request، يتم تسجيل تطبيق الدفع في الوقت المناسب وتشغيله مباشرةً. يتطلّب تخطّي واجهة مستخدم Payment Request لتشغيل تطبيق مسجَّل في الوقت المناسب إجراءً تفاعليًا من المستخدم، ما يمنع التسجيل غير المتوقّع لبرامج الخدمة المتعدّدة المصادر.

إنشاء تطبيق دفع مستند إلى الويب

عندما يطلب التاجر show()، يرسل Chrome حدث paymentrequest إلى مشغّل الخدمات. استخدِم openWindow() داخل respondWith() لعرض واجهة مستخدم الدفع، ثم حلّ المشكلة باستخدام استجابة الدفع.

للاطّلاع على واجهة برمجة التطبيقات الكاملة، يُرجى مراجعة واجهة برمجة التطبيقات Web-Based Payment Handler API على شبكة مطوّري برامج Mozilla‏ (MDN).

الخطوات التالية

• دليل مطوّري تطبيقات الدفع على Android
• تقديم معلومات الشحن والاتصال من تطبيق دفع على Android