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

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

Eiji Kitamura

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

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

• تعزيز تطبيقات الدفع باستخدام Web Payments
• مسار معاملة الدفع

دعم المتصفح

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

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

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

• معرّف طريقة الدفع المستندة إلى عنوان 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

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

[payment handler] /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)

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

[معالج الدفع] /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: دليل المطوّر لمزيد من التفاصيل حول كيفية إعداد هذه التطبيقات.

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

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

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

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

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

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

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

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

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

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