إتاحة تطبيقات الدفع على Android في WebView باستخدام واجهة برمجة التطبيقات Payment Request API

Rouslan Solomakhin
Rouslan Solomakhin
X GitHub
Dominik Mengelt
José Luis Zapata

يمكنك استخدام Payment Request API لتشغيل تطبيقات الدفع على Android من المواقع الإلكترونية التي تعمل داخل WebView. تعمل هذه الميزة باستخدام واجهة برمجة التطبيقات نفسها المستندة إلى JavaScript المتوفّرة حاليًا في Chrome.

تتوفّر هذه الميزة بدءًا من الإصدار 136 من WebView، والذي يتم طرحه عادةً مع الإصدار 136 من Chrome.

إعداد Payment Request في التطبيقات المضيفة لـ WebView

لتشغيل تطبيقات الدفع على Android من WebView، تستعلم Payment Request API عن النظام باستخدام أغراض Android. ولإتاحة ذلك، يجب أن يوضّح تطبيق مضيف WebView هذه الأهداف في ملف AndroidManifest.xml.

يتم إيقاف ميزة "طلبات الدفع" تلقائيًا في WebView.

اتّبِع الخطوات التالية لتفعيلها باستخدام WebSettingsCompat من إصدار Jetpack Webkit 1.14.0 أو إصدار أحدث:

الخطوة 1: إضافة تبعية Jetpack Webkit

‫Kotlin (build.gradle.kts)

dependencies {
  implementation("androidx.webkit:webkit:1.14.0")
}

Groovy (ملف build.gradle)

dependencies {
  implementation 'androidx.webkit:webkit:1.14.0'
}

قائمة الإصدارات

[versions]
webkit = "1.14.0"

[libraries]
androidx-ktx = { group = "androidx.webkit", name = "webkit", version.ref = "webkit" }

الخطوة 2: استيراد الصفوف المطلوبة

تتيح لك هذه الفئات الوصول إلى إعدادات WebView وضبطها والتحقّق من توفّر الميزات في وقت التشغيل.

import android.webkit.WebSettings;
import android.webkit.WebView;
import androidx.webkit.WebSettingsCompat;
import androidx.webkit.WebViewFeature;

الخطوة 3: تفعيل Payment Request في رمز WebView

تؤدي هذه الخطوة إلى تفعيل ميزة "طلب الدفع" في WebView والتأكّد من أنّ الموقع الإلكتروني يمكنه تشغيلها باستخدام JavaScript.

تؤدي هذه الخطوة إلى تفعيل ميزة "طلب الدفع" في WebView والتأكّد من أنّ الموقع الإلكتروني يمكنه تشغيلها باستخدام JavaScript.

‫Kotlin (Compose)

AndroidView(
  factory = {
      WebView(it).apply {
          settings.javaScriptEnabled = true
          if (WebViewFeature.isFeatureSupported(
                  WebViewFeature.PAYMENT_REQUEST)) {
              WebSettingsCompat.setPaymentRequestEnabled(settings, true);
          }
      }
  },
  update = {it.loadUrl(url)
  }
)

جافا

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavascriptEnabled(true);
if (WebViewFeature.isFeatureSupported(
        WebViewFeature.PAYMENT_REQUEST)) {
    WebSettingsCompat.setPaymentRequestEnabled(webSettings, true);
}

الخطوة 4: إضافة فلاتر الأهداف في ملف AndroidManifest.xml

تتيح هذه الفلاتر لمكوّن WebView اكتشاف تطبيقات الدفع على Android واستدعائها باستخدام نوايا النظام:

<queries>
  <intent>
    <action android:name="org.chromium.intent.action.PAY"/>
  </intent>
  <intent>
    <action android:name="org.chromium.intent.action.IS_READY_TO_PAY"/>
  </intent>
  <intent>
    <action android:name="org.chromium.intent.action.UPDATE_PAYMENT_DETAILS"/>
  </intent>
</queries>

استخدِم النوايا التالية في AndroidManifest.xml لتوفير الميزات الرئيسية في PaymentRequest:

الخطوة 5: إعادة إنشاء تطبيقك ونشره

بعد إجراء هذه التغييرات، أعِد إنشاء تطبيقك وأصدِر إصدارًا معدَّلاً على &quot;متجر Play&quot;.

اختياري: تخصيص عمليات التحقّق من الاستعداد

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

يتضمّن Chrome إعدادًا يتيح للمستخدمين تفعيل هذا التحقّق أو إيقافه. يمكن لتطبيقات المضيف WebView تقديم زر تبديل مشابه باستخدام:

WebSettingsCompat.setHasEnrolledInstrumentEnabled(WebSettings, boolean)

يكون هذا الإعداد مفعّلاً تلقائيًا (true). وعندما يكون نشطًا، يسمح للمواقع الإلكترونية التي تعمل في WebView باكتشاف ما إذا كان المستخدم لديه وسيلة دفع مسجّلة.

التحقّق من توفّر Payment Request في JavaScript

بعد استدعاء WebSettingsCompat.setPaymentRequestEnabled(webSettings, true) في Java أو Kotlin، تصبح الواجهة window.PaymentRequest متاحة في JavaScript. يمكن استخدام ذلك لرصد الميزات على صفحة الويب:

if (window.PaymentRequest) {
  // Payment Request is available.
} else {
  // Payment Request is not available.
}

عند توفّر window.PaymentRequest، يمكن لصفحة الويب مواصلة بدء معاملة دفع.

دمج تطبيقات الدفع على Android مع Payment Request

لكي تتوافق تطبيقات الدفع على Android مع ميزة &quot;طلب الدفع&quot;، يجب أن تستجيب لبعض الأهداف المحددة للنظام وأن تعالج بيانات الدفع بشكل آمن. توضّح هذه الأدلة كيفية تسجيل طرق الدفع وتنفيذ خدمة الدفع وحماية تطبيقك:

حماية تطبيقك من إساءة الاستخدام

يمكن لأي تطبيق استدعاء نوايا الدفع في Android org.chromium.intent.action.PAY وIS_READY_TO_PAY وUPDATE_PAYMENT_DETAILS. يمكن لتطبيقات مضيف WebView أيضًا مراقبة طلبات Payment Request وبدءها واعتراضها. وبما أنّ WebView يتم تشغيله داخل عملية التطبيق المضيف، لا يمكنه تقييد كيفية استخدام هذه الأهداف. يمكن أن تستغل التطبيقات الضارة ذلك لتنفيذ هجمات أوراكل.

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

يجب تضمين وسائل حماية في تطبيق الدفع للتصدّي لهذا النوع من إساءة الاستخدام.

استخدِم الاستراتيجيات التالية للحدّ من إساءة الاستخدام:

  • تقييد الطلبات: الحدّ من عدد المرات التي يستجيب فيها تطبيقك لـ IS_READY_TO_PAY. على سبيل المثال، الردّ مرة واحدة فقط كل 30 دقيقة.
  • استخدام التشفير: يمكنك تشفير الردود الحسّاسة لكي تتمكّن خوادم التجّار الموثوق بها فقط من فك تشفيرها. يجب إجراء عمليات التشفير وفك التشفير دائمًا من جهة الخادم.
  • تقييد الوصول: احتفِظ بقائمة مسموح بها لتطبيقات المضيفين الموثوق بها في WebView باستخدام أسماء الحِزم وشهادات توقيع SHA256. يمكنك الاطّلاع على مزيد من المعلومات في دليل مطوّري تطبيقات الدفع على Android.