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

ตรวจสอบการรองรับ 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 กับคำขอการชำระเงิน

หากต้องการรองรับคำขอการชำระเงิน แอปการชำระเงินของ Android ต้องตอบสนองต่อ Intent ของระบบที่เฉพาะเจาะจงและจัดการข้อมูลการชำระเงินอย่างปลอดภัย คำแนะนำเหล่านี้จะอธิบายวิธี ลงทะเบียนวิธีการชำระเงิน ใช้บริการชำระเงิน และปกป้องแอป ของคุณ

รักษาความปลอดภัยให้แอปของคุณจากการใช้งานในทางที่ผิด

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

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

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

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

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