إتاحة تطبيقات الدفع على 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، الذي يتم شحنه عادةً مع Chrome 136.

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

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

تكون ميزة Payment Request غير مفعّلة تلقائيًا في 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

تؤدي هذه الخطوة إلى تفعيل ميزة Payment Request في WebView وتضمن إمكانية تفعيل الموقع الإلكتروني لها باستخدام JavaScript.

تؤدي هذه الخطوة إلى تفعيل ميزة Payment Request في 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 لدعم ميزات Payment Request الرئيسية:

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

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

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

بالإضافة إلى تشغيل تطبيقات الدفع على 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

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

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

يمكن لأي تطبيق استدعاء أغراض الدفع على 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.