Cómo admitir apps de pago de Android en WebView con la API de Payment Request

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

Puedes usar la API de Payment Request para iniciar apps de pago para Android desde sitios web que se ejecutan dentro de un objetoWebView. Esto funciona con la misma API de JavaScript que ya está disponible en Chrome.

Esta función está disponible a partir de la versión 136 de WebView, que suele lanzarse con Chrome 136.

Configura Payment Request en apps host de WebView

Para iniciar apps de pago para Android desde WebView, la API de Payment Request consulta el sistema con intents de Android. Para admitir esto, la app host de WebView debe declarar esos intents en su archivo AndroidManifest.xml.

De forma predeterminada, la Solicitud de pago está inhabilitada en WebView.

Sigue estos pasos para habilitarlo con WebSettingsCompat de Jetpack Webkit versión 1.14.0 o posterior:

Paso 1: Agrega la dependencia de 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'
}

Catálogo de versiones

[versions]
webkit = "1.14.0"

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

Paso 2: Importa las clases requeridas

Estas clases te permiten acceder a la configuración de WebView y establecerla, y verificar la compatibilidad con funciones en el tiempo de ejecución.

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

Paso 3: Habilita la solicitud de pago en el código de WebView

Este paso activa la función Payment Request en tu WebView y garantiza que el sitio pueda activarla con JavaScript.

Este paso activa la función de Payment Request en tu WebView y garantiza que el sitio pueda activarla con 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);
}

Paso 4: Agrega filtros de intents en AndroidManifest.xml

Estos filtros permiten que WebView descubra e invoque apps de pago para Android a través de intents del sistema:

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

Usa los siguientes intents en tu AndroidManifest.xml para admitir las funciones clave de PaymentRequest:

Paso 5: Vuelve a compilar y publicar tu app

Después de realizar estos cambios, vuelve a compilar tu app y lanza una versión actualizada en Play Store.

Opcional: Personaliza las verificaciones de preparación

Además de iniciar apps de pago para Android, la API de Payment Request permite que los sitios web verifiquen si el usuario está listo para pagar. Por ejemplo, los sitios web pueden detectar si el usuario configuró una forma de pago admitida.

Chrome incluye un parámetro de configuración que permite a los usuarios habilitar o inhabilitar esta verificación. Las apps host de WebView pueden ofrecer un botón de activación similar con lo siguiente:

WebSettingsCompat.setHasEnrolledInstrumentEnabled(WebSettings, boolean)

Este parámetro de configuración está habilitado de forma predeterminada (true). Cuando está activo, permite que los sitios web que se ejecutan en WebView detecten si el usuario tiene un instrumento de pago inscrito.

Cómo verificar la compatibilidad con la API de Payment Request en JavaScript

Después de que se llama a WebSettingsCompat.setPaymentRequestEnabled(webSettings, true) en Java o Kotlin, la interfaz window.PaymentRequest está disponible en JavaScript. Esto se puede usar para la detección de funciones en la página web:

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

Cuando window.PaymentRequest está disponible, la página web puede seguir iniciando una transacción de pago.

Integra apps de pago para Android con Payment Request

Para admitir Payment Request, las apps de pago para Android deben responder a intents específicos del sistema y controlar los datos de pago de forma segura. En estas guías, se explica cómo registrar formas de pago, implementar tu servicio de pago y proteger tu app:

Protege tu app contra el uso inadecuado

Cualquier app puede llamar a los intents de pago de Android org.chromium.intent.action.PAY, IS_READY_TO_PAY y UPDATE_PAYMENT_DETAILS. Las apps host de WebView también pueden observar, iniciar e interceptar llamadas de Payment Request. Como WebView se ejecuta dentro del proceso de la app host, no puede restringir el uso de estos intents. Las apps maliciosas pueden aprovechar esta situación para lanzar ataques de oráculo.

En un ataque de oráculo, una app de pagos revela de forma involuntaria información que no debería. Por ejemplo, un atacante podría usar IS_READY_TO_PAY para descubrir qué instrumentos de pago tiene disponibles el usuario.

Debes incorporar protecciones en tu app de pagos para defenderte contra este tipo de uso inadecuado.

Usa las siguientes estrategias para mitigar el abuso:

  • Limita las solicitudes: Limita la frecuencia con la que tu app responde a IS_READY_TO_PAY. Por ejemplo, responde solo una vez cada 30 minutos.
  • Usar encriptación: Encripta las respuestas sensibles para que solo tus servidores de comercio de confianza puedan desencriptarlas. Siempre realiza la encriptación y la desencriptación en el servidor.
  • Restringe el acceso: Mantén una lista de entidades permitidas de apps host de WebView de confianza con sus nombres de paquetes y certificados de firma SHA256. Obtén más información en la guía para desarrolladores de apps de pago para Android.