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

إعداد "طلب الدفع" في التطبيقات المستضافة على WebView

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

يكون خيار "طلب الدفع" غير مفعَّل تلقائيًا في WebView.

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

الخطوة 1: إضافة التبعية لـ AndroidX 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: تفعيل طلب الدفع في رمز 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)
  }
)

Java

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 لتفعيل الميزات الرئيسية لطلب الدفع:

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

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

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

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

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

WebSettingsCompat.setHasEnrolledInstrumentEnabled(WebSettings, boolean)

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

التحقّق من توفّر طلبات الدفع في 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 مع ميزة "طلب الدفع"

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

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

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

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

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

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

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