Hỗ trợ ứng dụng thanh toán Android trong WebView bằng API Yêu cầu thanh toán

Rouslan Solomakhin

Dominik Mengelt

José Luis Zapata

Bạn có thể sử dụng Payment Request API để chạy các ứng dụng thanh toán trên Android từ những trang web đang chạy trong một WebView. Tính năng này hoạt động bằng cách sử dụng cùng một API JavaScript hiện có trong Chrome.

Tính năng này có trong WebView phiên bản 136 (thường đi kèm với Chrome 136).

Thiết lập Yêu cầu thanh toán trong các ứng dụng lưu trữ WebView

Để chạy các ứng dụng thanh toán trên Android từ WebView, Payment Request API sẽ truy vấn hệ thống bằng cách sử dụng các ý định của Android. Để hỗ trợ việc này, ứng dụng lưu trữ WebView phải khai báo các ý định đó trong tệp AndroidManifest.xml.

Theo mặc định, Yêu cầu thanh toán bị tắt trong WebView.

Hãy làm theo các bước sau để bật tính năng này bằng cách sử dụng WebSettingsCompat từ Jetpack Webkit phiên bản 1.14.0 trở lên:

Bước 1: Thêm phần phụ thuộc 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'
}

Danh mục phiên bản

[versions]
webkit = "1.14.0"

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

Bước 2: Nhập các lớp bắt buộc

Các lớp này cho phép bạn truy cập và định cấu hình chế độ cài đặt WebView, đồng thời kiểm tra khả năng hỗ trợ tính năng trong thời gian chạy.

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

Bước 3: Bật Yêu cầu thanh toán trong mã WebView

Bước này sẽ bật tính năng Yêu cầu thanh toán trong WebView và đảm bảo trang web có thể kích hoạt tính năng này bằng 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);
}

Bước 4: Thêm bộ lọc ý định vào AndroidManifest.xml

Các bộ lọc này cho phép WebView khám phá và gọi các ứng dụng thanh toán Android bằng cách sử dụng ý định hệ thống:

<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>

Hãy sử dụng các ý định sau trong AndroidManifest.xml để hỗ trợ các tính năng chính của PaymentRequest:

org.chromium.intent.action.PAY: Cho phép WebView gọi các ứng dụng thanh toán Android và nhận phản hồi thanh toán. Tìm hiểu thêm trong hướng dẫn dành cho nhà phát triển ứng dụng thanh toán Android.
org.chromium.intent.action.IS_READY_TO_PAY: Cho phép các trang web kiểm tra xem người dùng đã thiết lập một phương thức thanh toán được hỗ trợ hay chưa. Tìm hiểu thêm trong Hướng dẫn dành cho nhà phát triển ứng dụng thanh toán Android
org.chromium.intent.action.UPDATE_PAYMENT_DETAILS: Hỗ trợ nội dung cập nhật linh hoạt, chẳng hạn như khi người dùng thay đổi địa chỉ giao hàng hoặc lựa chọn trong ứng dụng thanh toán. Tìm hiểu thêm trong phần Cung cấp thông tin giao hàng và thông tin liên hệ từ một ứng dụng thanh toán trên Android.

Bước 5: Tạo lại và xuất bản ứng dụng

Sau khi thực hiện những thay đổi này, hãy tạo lại ứng dụng và phát hành một phiên bản cập nhật lên Cửa hàng Play.

Không bắt buộc: Tuỳ chỉnh quy trình kiểm tra trạng thái sẵn sàng

Ngoài việc chạy các ứng dụng thanh toán trên Android, Payment Request API còn cho phép các trang web kiểm tra xem người dùng đã sẵn sàng thanh toán hay chưa. Ví dụ: các trang web có thể phát hiện xem người dùng đã thiết lập một phương thức thanh toán được hỗ trợ hay chưa.

Chrome có một chế độ cài đặt cho phép người dùng bật hoặc tắt chế độ kiểm tra này. Các ứng dụng lưu trữ WebView có thể cung cấp một nút bật/tắt tương tự bằng cách sử dụng:

WebSettingsCompat.setHasEnrolledInstrumentEnabled(WebSettings, boolean)

Chế độ cài đặt này được bật theo mặc định (true). Khi hoạt động, chế độ này cho phép các trang web chạy trong WebView phát hiện xem người dùng có công cụ thanh toán đã đăng ký hay không.

Kiểm tra xem JavaScript có hỗ trợ Yêu cầu thanh toán hay không

Sau khi WebSettingsCompat.setPaymentRequestEnabled(webSettings, true) được gọi trong Java hoặc Kotlin, giao diện window.PaymentRequest sẽ có sẵn trong JavaScript. Bạn có thể dùng mã này để phát hiện tính năng trên trang web:

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

Khi window.PaymentRequest có sẵn, trang web có thể tiếp tục bắt đầu giao dịch thanh toán.

Tích hợp các ứng dụng thanh toán Android với Yêu cầu thanh toán

Để hỗ trợ Yêu cầu thanh toán, các ứng dụng thanh toán trên Android phải phản hồi các ý định cụ thể của hệ thống và xử lý dữ liệu thanh toán một cách an toàn. Các hướng dẫn này giải thích cách đăng ký phương thức thanh toán, triển khai dịch vụ thanh toán và bảo vệ ứng dụng của bạn:

Hướng dẫn dành cho nhà phát triển ứng dụng thanh toán trên Android: Tạo và định cấu hình ứng dụng thanh toán, bao gồm cả cách xử lý ý định và xác minh ứng dụng gọi.
Thiết lập phương thức thanh toán: Đăng ký phương thức thanh toán và xác định các chức năng của phương thức đó.

Bảo vệ ứng dụng của bạn khỏi hành vi sử dụng sai mục đích

Mọi ứng dụng đều có thể gọi các ý định thanh toán của Android org.chromium.intent.action.PAY, IS_READY_TO_PAY và UPDATE_PAYMENT_DETAILS. Các ứng dụng lưu trữ WebView cũng có thể quan sát, bắt đầu và chặn các lệnh gọi Payment Request. Vì WebView chạy trong quy trình của ứng dụng lưu trữ, nên WebView không thể hạn chế cách sử dụng các ý định này. Các ứng dụng độc hại có thể khai thác điều này để thực hiện các cuộc tấn công oracle.

Trong một cuộc tấn công oracle, một ứng dụng thanh toán vô tình tiết lộ thông tin mà ứng dụng đó không nên tiết lộ. Ví dụ: kẻ tấn công có thể sử dụng IS_READY_TO_PAY để khám phá những phương thức thanh toán mà người dùng có.

Bạn phải tích hợp các biện pháp bảo vệ vào ứng dụng thanh toán của mình để chống lại loại hành vi sai trái này.

Hãy sử dụng các chiến lược sau đây để giảm thiểu hành vi sai trái:

Điều tiết băng thông của yêu cầu: Giới hạn tần suất ứng dụng của bạn phản hồi IS_READY_TO_PAY. Ví dụ: chỉ phản hồi 30 phút một lần.
Sử dụng quy trình mã hoá: Mã hoá các phản hồi nhạy cảm để chỉ những máy chủ người bán đáng tin cậy của bạn mới có thể giải mã các phản hồi đó. Luôn thực hiện quy trình mã hoá và giải mã ở phía máy chủ.
Hạn chế quyền truy cập: Duy trì danh sách cho phép gồm các ứng dụng lưu trữ WebView đáng tin cậy bằng cách sử dụng tên gói và chứng chỉ ký SHA256 của các ứng dụng đó. Tìm hiểu thêm trong hướng dẫn dành cho nhà phát triển ứng dụng thanh toán Android.

Hỗ trợ ứng dụng thanh toán Android trong WebView bằng API Yêu cầu thanh toán Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.