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

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

Eiji Kitamura

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

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

• تعزيز تطبيقات الدفع باستخدام ميزة "الدفع على الويب"
• مدة معالجة معاملة الدفع

دعم المتصفح

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

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

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

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

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

1. يرسل المتصفّح طلبًا إلى عنوان URL method identifier ويُجلبmethod manifest.
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.

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

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

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

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

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

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

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

[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"
        }
      ]
    }
  ]
}

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

يتم استخدام الخاصية 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، تعرض واجهة PaymentRequest API واجهة مستخدم يوفّرها المتصفّح وتحمل اسم "واجهة مستخدم طلب الدفع". تسمح واجهة المستخدم هذه للمستخدمين باختيار تطبيق دفع. بعد الضغط على الزر متابعة في واجهة مستخدم طلب الدفع، يتم تشغيل تطبيق الدفع المحدّد.

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

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

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

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

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

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

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

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

• تطبيقات الدفع على Android: دليل المطوّر
• دليل المطوّر لتطبيقات الدفع المستندة إلى الويب