ستتطلّب واجهة برمجة تطبيقات معالجة الدفع باستخدام سياسة أمان المحتوى Connect-src

تتيح Payment Handler API لموفّري خدمات الدفع إتاحة تجربة الدفع المخصّصة للتجّار، إلى جانب Payment Request API.

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

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

إذا كنت تستخدِم واجهة برمجة التطبيقات Payment Handler API وسياسة أمان المحتوى (CSP) لتوفير حماية أفضل، عليك التأكّد من إضافة نطاقات طلبات HTTP المُرسَلة من المتصفّح إلى توجيه connect-src في عنوان سياسة أمان المحتوى.

على سبيل المثال، إذا كان رمز JavaScript يستدعي new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)، يجب أن يحتويconnect-src ملف CSP على https://example.com أو https://example.com/pay:

Content-Security-Policy: connect-src https://example.com/pay

إذا كان https://example.com/pay إعادة توجيه عبر مصادر متعددة، يجب تضمين المصدر الوجهة في CSP أيضًا. على سبيل المثال، إذا كان https://example.com/pay يعيد التوجيه إلى https://pay.example.com، يجب تضمين كلاً من المصادر في CSP:

Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com

تجربتها محليًا

لتفعيل الميزة على الجهاز قبل شحنه، اتّبِع الخطوات التالية:

  1. انتقِل إلى chrome://flags/#web-payment-api-cspعلى Chrome.
  2. غيِّر "سياسة CSP لواجهة برمجة التطبيقات Web Payment API" من "تلقائية" إلى "مفعّلة".
  3. أعِد تشغيل Chrome.

التحقّق من عناوين URL للطلبات

للتحقّق من عناوين URL للطلبات المُرسَلة من Payment Handler API:

  1. فعِّل chrome://flags/#web-payment-api-csp.
  2. انتقِل إلى صفحة الدفع وافتح "أدوات مطوّري برامج Chrome".
  3. ابحث عن رسائل خطأ مثل ما يلي: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. أضِف معرِّف الطريقة المحدّد إلى سياسة أمان المحتوى.

صورة Eduardo Soares على Unsplash