รองรับแอปการชำระเงิน Android ใน WebView โดยใช้ Payment Request API

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

คุณสามารถใช้ Payment Request API เพื่อเปิดแอปการชำระเงิน Android จากเว็บไซต์ที่ทำงานภายใน WebView ซึ่งทำงานโดยใช้ JavaScript API เดียวกันที่มีอยู่แล้วใน Chrome

ฟีเจอร์นี้ใช้ได้ใน WebView เวอร์ชัน 136 เป็นต้นไป ซึ่งมักจะมาพร้อมกับ Chrome เวอร์ชัน 136

ตั้งค่าคำขอการชำระเงินในแอปโฮสต์ WebView

หากต้องการเปิดแอปการชำระเงิน Android จาก WebView ทาง Payment Request API จะค้นหาระบบโดยใช้ Intent ของ Android หากต้องการรองรับการดำเนินการนี้ แอปโฮสต์ WebView จะต้องประกาศ Intent เหล่านั้นในไฟล์ 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: เพิ่มตัวกรอง Intent ใน AndroidManifest.xml

ตัวกรองเหล่านี้ช่วยให้ WebView ค้นพบและเรียกใช้แอปการชำระเงิน Android โดยใช้ Intent ของระบบ

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

ใช้ Intent ต่อไปนี้ใน AndroidManifest.xml เพื่อรองรับฟีเจอร์ Payment Request หลัก

ขั้นตอนที่ 5: บิลด์และเผยแพร่แอปอีกครั้ง

หลังจากทำการเปลี่ยนแปลงเหล่านี้แล้ว ให้สร้างแอปขึ้นมาใหม่และเผยแพร่เวอร์ชันที่อัปเดตแล้วใน Play Store

ไม่บังคับ: ปรับแต่งการตรวจสอบความพร้อม

นอกจากการเปิดตัวแอปการชำระเงิน 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 จะต้องตอบสนองต่อ Intent ของระบบที่เฉพาะเจาะจงและจัดการข้อมูลการชำระเงินอย่างปลอดภัย คู่มือเหล่านี้อธิบายวิธีลงทะเบียนวิธีการชำระเงิน ใช้บริการการชำระเงิน และปกป้องแอป

ปกป้องแอปของคุณจากการใช้งานในทางที่ผิด

แอปใดก็ได้เรียกใช้ Intent การชำระเงิน Android org.chromium.intent.action.PAY, IS_READY_TO_PAY และ UPDATE_PAYMENT_DETAILS แอปโฮสต์ WebView ยังสังเกตการณ์ เริ่ม และขัดจังหวะการเรียกใช้คำขอการชำระเงินได้ด้วย เนื่องจาก WebView ทำงานภายในกระบวนการของแอปโฮสต์ จึงไม่สามารถจํากัดวิธีใช้ Intent เหล่านี้ได้ แอปที่เป็นอันตรายอาจใช้ประโยชน์จากช่องโหว่นี้เพื่อเริ่มการโจมตี Oracle

ในการโจมตีแบบออราเคิล แอปการชำระเงินจะเปิดเผยข้อมูลโดยไม่ตั้งใจ ตัวอย่างเช่น ผู้โจมตีอาจใช้ IS_READY_TO_PAY เพื่อค้นหาว่าผู้ใช้มีเครื่องมือการชำระเงินใดบ้าง

คุณต้องสร้างการป้องกันไว้ในแอปการชำระเงินเพื่อป้องกันการใช้ในทางที่ผิดประเภทนี้

ใช้กลยุทธ์ต่อไปนี้เพื่อลดการละเมิด

  • จำกัดคำขอ: จำกัดความถี่ที่แอปตอบสนองต่อ IS_READY_TO_PAY เช่น ตอบกลับเพียงครั้งเดียวทุก 30 นาที
  • ใช้การเข้ารหัส: เข้ารหัสการตอบกลับที่มีความละเอียดอ่อนเพื่อให้มีเพียงเซิร์ฟเวอร์ของผู้ขายที่เชื่อถือเท่านั้นที่ถอดรหัสได้ ดำเนินการเข้ารหัสและถอดรหัสในฝั่งเซิร์ฟเวอร์เสมอ
  • จํากัดการเข้าถึง: ดูแลรักษารายการที่อนุญาตของแอปโฮสต์ WebView ที่เชื่อถือได้โดยใช้ชื่อแพ็กเกจและใบรับรองการรับรอง SHA256 ดูข้อมูลเพิ่มเติมในคู่มือนักพัฒนาแอปการชำระเงิน Android