Mendukung aplikasi pembayaran Android di WebView menggunakan Payment Request API

Rouslan Solomakhin

Dominik Mengelt

José Luis Zapata

Anda dapat menggunakan Payment Request API untuk meluncurkan aplikasi pembayaran Android dari situs yang berjalan di dalam WebView. Fitur ini berfungsi menggunakan JavaScript API yang sama yang sudah tersedia di Chrome.

Fitur ini tersedia mulai WebView versi 136, yang biasanya dikirimkan dengan Chrome 136.

Menyiapkan Permintaan Pembayaran di aplikasi host WebView

Untuk meluncurkan aplikasi pembayaran Android dari WebView, Payment Request API mengkueri sistem menggunakan intent Android. Untuk mendukung hal ini, aplikasi host WebView harus mendeklarasikan intent tersebut dalam file AndroidManifest.xml-nya.

Secara default, Payment Request dinonaktifkan di WebView.

Ikuti langkah-langkah berikut untuk mengaktifkannya menggunakan WebSettingsCompat dari Jetpack Webkit versi 1.14.0 atau yang lebih tinggi:

Langkah 1: Tambahkan dependensi 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'
}

Katalog versi

[versions]
webkit = "1.14.0"

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

Langkah 2: Impor class yang diperlukan

Class ini memungkinkan Anda mengakses dan mengonfigurasi setelan WebView serta memeriksa dukungan fitur saat runtime.

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

Langkah 3: Aktifkan Permintaan Pembayaran dalam kode WebView

Langkah ini mengaktifkan fitur Permintaan Pembayaran di WebView Anda dan memastikan situs dapat memicunya menggunakan 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);
}

Langkah 4: Tambahkan filter intent di AndroidManifest.xml

Filter ini memungkinkan WebView menemukan dan memanggil aplikasi pembayaran Android menggunakan intent sistem:

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

Gunakan intent berikut di AndroidManifest.xml Anda untuk mendukung fitur Permintaan Pembayaran utama:

org.chromium.intent.action.PAY: Memungkinkan WebView memanggil aplikasi pembayaran Android dan menerima respons pembayaran. Pelajari lebih lanjut di panduan developer aplikasi pembayaran Android.
org.chromium.intent.action.IS_READY_TO_PAY: Mengizinkan situs memeriksa apakah pengguna telah menyiapkan metode pembayaran yang didukung. Pelajari lebih lanjut di panduan developer aplikasi pembayaran Android
org.chromium.intent.action.UPDATE_PAYMENT_DETAILS: Mendukung pembaruan dinamis, seperti saat pengguna mengubah alamat atau opsi pengiriman di aplikasi pembayaran. Pelajari lebih lanjut di Memberikan informasi pengiriman dan kontak dari aplikasi pembayaran Android.

Langkah 5: Bangun ulang dan publikasikan aplikasi Anda

Setelah melakukan perubahan ini, bangun kembali aplikasi Anda dan rilis versi yang telah diupdate ke Play Store.

Opsional: Menyesuaikan pemeriksaan kesiapan

Selain meluncurkan aplikasi pembayaran Android, Payment Request API memungkinkan situs memeriksa apakah pengguna siap membayar. Misalnya, situs dapat mendeteksi apakah pengguna telah menyiapkan metode pembayaran yang didukung.

Chrome menyertakan setelan yang memungkinkan pengguna mengaktifkan atau menonaktifkan pemeriksaan ini. Aplikasi host WebView dapat menawarkan tombol serupa menggunakan:

WebSettingsCompat.setHasEnrolledInstrumentEnabled(WebSettings, boolean)

Setelan ini diaktifkan secara default (true). Jika aktif, setelan ini memungkinkan situs yang berjalan di WebView mendeteksi apakah pengguna memiliki alat pembayaran yang terdaftar.

Memeriksa dukungan Permintaan Pembayaran di JavaScript

Setelah WebSettingsCompat.setPaymentRequestEnabled(webSettings, true) dipanggil di Java atau Kotlin, antarmuka window.PaymentRequest akan tersedia di JavaScript. Ini dapat digunakan untuk deteksi fitur di halaman web:

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

Jika window.PaymentRequest tersedia, halaman web dapat terus memulai transaksi pembayaran.

Mengintegrasikan aplikasi pembayaran Android dengan Permintaan Pembayaran

Untuk mendukung Permintaan Pembayaran, aplikasi pembayaran Android harus merespons intent sistem tertentu dan menangani data pembayaran dengan aman. Panduan ini menjelaskan cara mendaftarkan metode pembayaran, menerapkan layanan pembayaran, dan melindungi aplikasi Anda:

Panduan developer aplikasi pembayaran Android: Bangun dan konfigurasi aplikasi pembayaran Anda, termasuk cara menangani intent dan memverifikasi aplikasi yang memanggil.
Menyiapkan metode pembayaran: Daftarkan metode pembayaran Anda dan tentukan kemampuannya.

Mengamankan aplikasi Anda dari penyalahgunaan

Aplikasi apa pun dapat memanggil maksud pembayaran Android org.chromium.intent.action.PAY, IS_READY_TO_PAY, dan UPDATE_PAYMENT_DETAILS. Aplikasi host WebView juga dapat mengamati, memulai, dan mencegat panggilan Payment Request. Karena WebView berjalan di dalam proses aplikasi host, WebView tidak dapat membatasi cara penggunaan intent ini. Aplikasi berbahaya dapat mengeksploitasi hal ini untuk meluncurkan serangan oracle.

Dalam serangan oracle, aplikasi pembayaran secara tidak sengaja mengungkapkan informasi yang seharusnya tidak diungkapkan. Misalnya, penyerang dapat menggunakan IS_READY_TO_PAY untuk menemukan instrumen pembayaran yang tersedia bagi pengguna.

Anda harus membangun perlindungan ke dalam aplikasi pembayaran Anda untuk melindungi dari penyalahgunaan semacam ini.

Gunakan strategi berikut untuk memitigasi penyalahgunaan:

Membatasi permintaan: Batasi frekuensi aplikasi Anda merespons IS_READY_TO_PAY. Misalnya, hanya merespons sekali setiap 30 menit.
Gunakan enkripsi: Enkripsi respons sensitif sehingga hanya server penjual tepercaya Anda yang dapat mendekripsinya. Selalu lakukan enkripsi dan dekripsi di sisi server.
Membatasi akses: Pertahankan daftar aplikasi host WebView tepercaya yang diizinkan menggunakan nama paket dan sertifikat penandatanganan SHA256-nya. Pelajari lebih lanjut di panduan developer aplikasi pembayaran Android.

Mendukung aplikasi pembayaran Android di WebView menggunakan Payment Request API Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.