نشكرك على متابعة مؤتمر Google I/O. مشاهدة المحتوى عند الطلب

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

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

Eiji Kitamura

تاريخ النشر: 27 سبتمبر 2017، تاريخ آخر تعديل: 1 يوليو 2025

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

إذا كنت لا تعرف مفهوم Web Payments أو طريقة عمل معاملة الدفع من خلال تطبيقات الدفع، يُرجى قراءة المقالتَين التاليتَين أولاً:

دعم المتصفح

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

	Chromium		Safari		Firefox
	أجهزة الكمبيوتر المكتبي	Android	أجهزة الكمبيوتر المكتبي	الجهاز الجوّال	أجهزة الكمبيوتر المكتبي/الأجهزة الجوّالة
Payment Request API	✔	✔	✔	✔
Web-based Payment Handler API	✔	✔
تطبيق دفع على iOS/Android	✔	✔	✔*	✔*

كيف يكتشف المتصفّح تطبيق دفع؟

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

معرّف طريقة الدفع المستند إلى عنوان URL
بيان طريقة الدفع (باستثناء الحالات التي يقدّم فيها طرف ثالث معرّف طريقة الدفع)
بيان تطبيق الويب

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

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

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

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

الخطوة 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 الخاص بمعرّف طريقة الدفع باستخدام عنوان Link HTTP يشير إلى عنوان URL الذي يمكن للمتصفّح من خلاله جلب بيان طريقة الدفع.

اضبط خادم طريقة الدفع للاستجابة باستخدام عنوان HTTP Link مع السمة rel="payment-method-manifest" وعنوان بيان طريقة الدفع. على سبيل المثال، إذا كان ملف البيان متوفّرًا على 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.

حقول بيان طريقة الدفع
اسم السمة	الوصف
`default_applications` (مطلوب)	تمثّل هذه السمة مصفوفة من عناوين URL تشير إلى بيانات تطبيقات الويب التي تتم استضافة تطبيقات الدفع عليها. (يمكن أن يكون عنوان URL نسبيًا). من المتوقّع أن يشير هذا الصفيف إلى بيان التطبيق الخاص بالتطوير وبيان التطبيق الخاص بالإنتاج وما إلى ذلك.
`supported_origins`	مصفوفة من عناوين URL تشير إلى المصادر التي قد تستضيف تطبيقات دفع تابعة لجهات خارجية وتستخدم طريقة الدفع نفسها. يُرجى العِلم أنّه يمكن تنفيذ طريقة دفع من خلال تطبيقات دفع متعدّدة.

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

[معالج الدفع] /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
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "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"
        }
      ]
    }
  ]
}

تُستخدَم المعلومات الموضّحة في بيان تطبيق الويب أيضًا لتحديد طريقة ظهور تطبيق الدفع في واجهة مستخدم Payment Request API.

حقول بيان تطبيق الويب المهمة
اسم السمة	الوصف
`name` (مطلوب)	يُستخدَم كاسم لتطبيق الدفع.
`icons` (مطلوب)	يُستخدَم كرمز لتطبيق الدفع. يستخدم Chrome هذه الرموز فقط، وقد تستخدمها المتصفحات الأخرى كرموز احتياطية إذا لم تحدّدها كجزء من أداة الدفع.
`serviceworker`	يُستخدَم لرصد مشغّل الخدمات الذي يعمل كتطبيق دفع مستند إلى الويب.
`serviceworker.src`	عنوان URL الذي يمكن تنزيل نص برمجي خاص بعامل الخدمة منه
`serviceworker.scope`	سلسلة تمثّل عنوان URL يحدّد نطاق تسجيل عامل الخدمة.
`serviceworker.use_cache`	عنوان URL الذي يمكن تنزيل نص برمجي خاص بعامل الخدمة منه
`related_applications`	يُستخدَم لرصد التطبيق الذي يعمل كتطبيق دفع توفّره نظام التشغيل. يمكنك الاطّلاع على مزيد من التفاصيل في دليل المطوّرين لتطبيقات الدفع على Android.
`prefer_related_applications`	تُستخدَم لتحديد تطبيق الدفع الذي سيتم تشغيله عندما يتوفّر كلّ من تطبيق دفع يوفّره نظام التشغيل وتطبيق دفع يستند إلى الويب.

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

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

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

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

يتم تحديد حقل related_applications في بيان تطبيق الويب، ويكون:
- يتطابق معرّف الحزمة والتوقيع الخاصان بالتطبيق المثبَّت، بينما يكون الحد الأدنى للإصدار (min_version) في ملف بيان تطبيق الويب أقل من أو يساوي إصدار التطبيق المثبَّت.
قيمة الحقل prefer_related_applications هي true.
يجب أن يكون تطبيق الدفع الخاص بالمنصة مثبّتًا وأن يتضمّن ما يلي:
- فلتر الأهداف org.chromium.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"
  }]
}]

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

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

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

[payment handler] /manifest.json:

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

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

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

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

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

تتداخل واجهة مستخدم طلب الدفع قبل تشغيل تطبيق الدفع.

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

تخطّي واجهة مستخدم طلب الدفع وتشغيل تطبيق الدفع مباشرةً

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

يتم تشغيل show() بإيماءة من المستخدم (مثل النقر بالماوس).
لا يتوفّر سوى تطبيق دفع واحد يستوفي الشروط التالية:
- تعرض هذه السمة معرّف طريقة الدفع المطلوبة.

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

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

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

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

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