feat(android): add support for enabling the Payment Request API (react-native-webview#2278) (react-native-webview#3763)

* feat(android) add support for enabling the Payment Request API

* updated androidx.webkit:webkit version to 1.14.0-beta01

* updated androidx.webkit:webkit version to 1.14.0-rc01

* updated androidx.webkit:webkit version to 1.14.0

Author: dmengelt

android/gradle.properties

@@ -1,5 +1,5 @@
 ReactNativeWebView_kotlinVersion=1.6.0
-ReactNativeWebView_webkitVersion=1.4.0
+ReactNativeWebView_webkitVersion=1.14.0
 ReactNativeWebView_compileSdkVersion=31
 ReactNativeWebView_targetSdkVersion=31
 ReactNativeWebView_minSdkVersion=21

android/src/main/AndroidManifest.xml

@@ -1,6 +1,18 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.reactnativecommunity.webview">
 
+  <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>
+
   <application>
     <provider
       android:name=".RNCWebViewFileProvider"

android/src/main/AndroidManifestNew.xml

@@ -1,4 +1,17 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+  <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>
+   
   <application>
     <provider
       android:name=".RNCWebViewFileProvider"

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManagerImpl.kt

@@ -715,4 +715,11 @@ class RNCWebViewManagerImpl(private val newArch: Boolean = false) {
     fun setWebviewDebuggingEnabled(viewWrapper: RNCWebViewWrapper, enabled: Boolean) {
         RNCWebView.setWebContentsDebuggingEnabled(enabled)
     }
+
+    fun setPaymentRequestEnabled(viewWrapper: RNCWebViewWrapper, enabled: Boolean) {
+        val view = viewWrapper.webView
+        if (WebViewFeature.isFeatureSupported(WebViewFeature.PAYMENT_REQUEST)) {
+            WebSettingsCompat.setPaymentRequestEnabled(view.settings, enabled)
+        }
+    }
 }

android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -331,6 +331,12 @@ public void setWebviewDebuggingEnabled(RNCWebViewWrapper view, boolean value) {
         mRNCWebViewManagerImpl.setWebviewDebuggingEnabled(view, value);
     }
 
+    @Override
+    @ReactProp(name = "paymentRequestEnabled")
+    public void setPaymentRequestEnabled(RNCWebViewWrapper view, boolean value) {
+        mRNCWebViewManagerImpl.setPaymentRequestEnabled(view, value);
+    }
+
     /* iOS PROPS - no implemented here */
     @Override
     public void setAllowingReadAccessToURL(RNCWebViewWrapper view, @Nullable String value) {}

android/src/oldarch/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -273,6 +273,11 @@ public void setUserAgent(RNCWebViewWrapper view, @Nullable String value) {
         mRNCWebViewManagerImpl.setUserAgent(view, value);
     }
 
+    @ReactProp(name = "paymentRequestEnabled")
+    public void setPaymentRequestEnabled(RNCWebViewWrapper view, boolean value) {
+        mRNCWebViewManagerImpl.setPaymentRequestEnabled(view, value);
+    }
+
     @Override
     protected void addEventEmitters(@NonNull ThemedReactContext reactContext, RNCWebViewWrapper viewWrapper) {
         // Do not register default touch emitter and let WebView implementation handle touches

docs/Reference.md

@@ -94,6 +94,7 @@ This document lays out the current public properties and methods for the React N
 - [`lackPermissionToDownloadMessage`](Reference.md#lackPermissionToDownloadMessage)
 - [`allowsProtectedMedia`](Reference.md#allowsProtectedMedia)
 - [`webviewDebuggingEnabled`](Reference.md#webviewDebuggingEnabled)
+- [`paymentRequestEnabled`](Reference.md#paymentRequestEnabled)
 
 ## Methods Index
 
@@ -1027,8 +1028,8 @@ Boolean value that indicates whether HTML5 videos can play Picture in Picture. T
 
 > **NOTE**
 >
-> In order to restrict playing video in picture in picture mode this props need to be set to `false`
-.
+> In order to restrict playing video in picture in picture mode this props need to be set to `false`.
+
 | Type | Required | Platform |
 | ---- | -------- | -------- |
 | bool | No       | iOS      |
@@ -1729,6 +1730,15 @@ Default is `false`. Supported on iOS as of 16.4, previous versions always allow
 | ------- | -------- | -------- |
 | boolean | No       | iOS & Android  |
 
+### `paymentRequestEnabled`[⬆](#props-index)
+
+Whether or not the webview has the Payment Request API enabled. Default is `false`.
+This is needed for Google Pay to work within the WebView.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Android  |
+
 ## Methods
 
 ### `goForward()`[⬆](#methods-index)

example/App.tsx

@@ -21,6 +21,7 @@ import Messaging from './examples/Messaging';
 import MultiMessaging from './examples/MultiMessaging';
 import NativeWebpage from './examples/NativeWebpage';
 import ApplePay from './examples/ApplePay';
+import GooglePay from './examples/GooglePay';
 import CustomMenu from './examples/CustomMenu';
 import OpenWindow from './examples/OpenWindow';
 import SuppressMenuItems from './examples/Suppress';
@@ -123,6 +124,14 @@ const TESTS = {
       return <ApplePay />;
     },
   },
+  GooglePay: {
+    title: 'Google Pay ',
+    testId: 'GooglePay',
+    description: 'Test to open a Google Pay supported page',
+    render() {
+      return <GooglePay />;
+    },
+  },
   CustomMenu: {
     title: 'Custom Menu',
     testId: 'CustomMenu',
@@ -250,6 +259,13 @@ export default class App extends Component<Props, State> {
               onPress={() => this._changeTest('ApplePay')}
             />
           )}
+          {Platform.OS === 'android' && (
+            <Button
+              testID="testType_googlePay"
+              title="GooglePay"
+              onPress={() => this._changeTest('GooglePay')}
+            />
+          )}
           <Button
             testID="testType_customMenu"
             title="CustomMenu"

example/examples/GooglePay.tsx

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+
+import WebView from 'react-native-webview';
+
+type Props = {};
+type State = {};
+
+export default class Alerts extends Component<Props, State> {
+    state = {};
+
+    render() {
+        return (
+            <View style={{ flex: 1 }}>
+                <WebView                    
+                    source={{uri: "https://rsolomakhin.github.io/pr/gp2-test"}}
+                    paymentRequestEnabled={true}
+                />
+            </View>
+        );
+    }
+}

src/RNCWebViewNativeComponent.ts

@@ -293,6 +293,7 @@ export interface NativeProps extends ViewProps {
   }>;
   userAgent?: string;
   injectedJavaScriptObject?: string;
+  paymentRequestEnabled?: boolean;
 }
 
 export interface NativeCommands {