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

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

Eiji Kitamura

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

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

دعم المتصفح

تتكون خدمة "الدفع على الويب" من بضعة أنواع مختلفة من التكنولوجيات تعتمد على المتصفح.

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

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

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

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

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

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

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

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

طريقة الدفع المعرّف هي سلسلة تستند إلى عنوان URL. على سبيل المثال، معرِّف Google Pay هو https://google.com/pay يمكن لمطوِّري تطبيقات الدفع اختيار أي عنوان URL كدفعة. معرّف الطريقة طالما أنّها تتحكّم فيه ويمكنها عرض خيارات عشوائية المحتوى. في هذه المقالة، سنستخدم 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 طلب "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، تظهر قائمة روابط إلى بيانات تطبيق الويب للتطبيقات المتوافقة وتطبيقات الدفع.

يمكنك توجيه المتصفّح للعثور على بيان طريقة الدفع في موقع آخر.

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

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

اضبط خادم طريقة الدفع للاستجابة لعنوان HTTP Link من خلال إضافة السمة rel="payment-method-manifest" وطريقة الدفع URL.

على سبيل المثال، إذا كان البيان في https://bobbucks.dev/payment-manifest.json، سيتضمن عنوان الاستجابة ما يلي:

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

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

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

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

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

سيظهر بيان تطبيق الويب النموذجي على النحو التالي:

[معالج الدفع] /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"
        }
      ]
    }
  ]
}

كما تُستخدم المعلومات الموضحة في بيان تطبيق الويب لتحديد كيفية يظهر تطبيق الدفع في واجهة مستخدم "طلب الدفع".

اسم الموقع الوصف
name (مطلوب) مستخدَم كاسم لتطبيق الدفع
icons (مطلوب) مستخدَم كرمز لتطبيق الدفع يستخدم Chrome فقط هذه الرموز؛ غير ذلك قد تستخدمها المتصفحات كرموز احتياطية إذا لم تحدّدها كرموز احتياطية من وسيلة الدفع.
serviceworker تُستخدَم لاكتشاف مشغّل الخدمات الذي يتم تشغيله كعملية دفع مستنِدة إلى الويب. التطبيق.
serviceworker.src عنوان URL المطلوب تنزيل النص البرمجي لمشغّل الخدمات منه.
serviceworker.scope سلسلة تمثِّل عنوان URL الذي يحدِّد عنوان 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: دليل المطوِّر لمزيد من التفاصيل حول كيفية إعدادها.

[معالج الدفع] /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 ضمن بيان تطبيق الويب.

[معالج الدفع] /manifest.json:

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

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

التعرّف على التحسينات الخاصة

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

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

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

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

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

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

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

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

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

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

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

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