feat(ios): Apple Pay support (#1946)

* Apple Pay support in ios Webview

* Apple Pay example

* rename prop to enableApplePay

* disable js evaluation if enableApplePay set to true

* documentation update for apple pay support

apple/RNCWebView.h

@@ -68,6 +68,7 @@
 @property (nonatomic, assign) BOOL ignoreSilentHardwareSwitch;
 @property (nonatomic, copy) NSString * _Nullable allowingReadAccessToURL;
 @property (nonatomic, assign) BOOL pullToRefreshEnabled;
+@property (nonatomic, assign) BOOL enableApplePay;
 #if !TARGET_OS_OSX
 @property (nonatomic, weak) UIRefreshControl * _Nullable refreshControl;
 #endif

apple/RNCWebView.m

@@ -146,7 +146,7 @@ static NSDictionary* customCertificatesForHost;
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */
     _savedAutomaticallyAdjustsScrollIndicatorInsets = NO;
 #endif
-      
+    _enableApplePay = NO;
   }
 
 #if !TARGET_OS_OSX
@@ -1096,6 +1096,10 @@ static NSDictionary* customCertificatesForHost;
 - (void)evaluateJS:(NSString *)js
           thenCall: (void (^)(NSString*)) callback
 {
+  if (self.enableApplePay) {
+    RCTLogWarn(@"Cannot run javascript when apple pay is enabled");
+    return;
+  }
   [self.webView evaluateJavaScript: js completionHandler: ^(id result, NSError *error) {
     if (callback != nil) {
       callback([NSString stringWithFormat:@"%@", result]);
@@ -1292,6 +1296,13 @@ static NSDictionary* customCertificatesForHost;
 - (void)resetupScripts:(WKWebViewConfiguration *)wkWebViewConfig {
   [wkWebViewConfig.userContentController removeAllUserScripts];
   [wkWebViewConfig.userContentController removeScriptMessageHandlerForName:MessageHandlerName];
+  if(self.enableApplePay){
+    if (self.postMessageScript){
+      [wkWebViewConfig.userContentController addScriptMessageHandler:[[RNCWeakScriptMessageDelegate alloc] initWithDelegate:self]
+                                                                       name:MessageHandlerName];
+    }
+    return;
+  }
 
   NSString *html5HistoryAPIShimSource = [NSString stringWithFormat:
     @"(function(history) {\n"

apple/RNCWebViewManager.m

@@ -99,6 +99,7 @@ RCT_EXPORT_VIEW_PROPERTY(limitsNavigationsToAppBoundDomains, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(messagingEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onMessage, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(enableApplePay, BOOL)
 
 RCT_EXPORT_METHOD(postMessage:(nonnull NSNumber *)reactTag message:(NSString *)message)
 {

docs/Reference.md

@@ -76,6 +76,7 @@ This document lays out the current public properties and methods for the React N
 - [`limitsNavigationsToAppBoundDomains`](Reference.md#limitsNavigationsToAppBoundDomains)
 - [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
 - [`setSupportMultipleWindows`](Reference.md#setSupportMultipleWindows)
+- [`enableApplePay`](Reference.md#enableApplePay)
 
 ## Methods Index
 
@@ -1364,6 +1365,26 @@ Example:
 <WebView setSupportMultipleWindows={false} />
 ```
 
+### `enableApplePay`
+
+A Boolean value which, when set to `true`, WebView will be rendered with Apple Pay support. Once set, websites will be able to invoke Apple Pay from React Native Webview.
+This comes with a cost features like [`injectJavaScript`](Reference.md#injectjavascriptstr), html5 History, [`sharedCookiesEnabled`](Reference.md#sharedCookiesEnabled), [`injectedJavaScript`](Reference.md#injectedjavascript), [`injectedJavaScriptBeforeContentLoaded`](Reference.md#injectedjavascriptbeforecontentloaded) will not work  See [Apple Pay Release Note](https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes#Payment-Request-API).
+
+If you are required to send message to App , webpage has to explicitly call webkit message handler and receive it on `onMessage` handler on react native side
+```javascript
+window.webkit.messageHandlers.ReactNativeWebView.postMessage("hello apple pay")
+```
+
+| Type    | Required | Default | Platform |
+| ------- | -------- | ------- | -------- |
+| boolean | No       | false   | iOS      |
+
+Example:
+
+```javascript
+<WebView enableApplePay={true} />
+```
+
 ## Methods
 
 ### `goForward()`[⬆](#methods-index)<!-- Link generated with jump2header -->

example/App.tsx

@@ -19,6 +19,7 @@ import Injection from './examples/Injection';
 import LocalPageLoad from './examples/LocalPageLoad';
 import Messaging from './examples/Messaging';
 import NativeWebpage from './examples/NativeWebpage';
+import ApplePay from './examples/ApplePay';
 
 const TESTS = {
   Messaging: {
@@ -93,6 +94,14 @@ const TESTS = {
       return <NativeWebpage />;
     },
   },
+  ApplePay: {
+    title: 'Apple Pay ',
+    testId: 'ApplePay',
+    description: 'Test to open a apple pay supported page',
+    render() {
+      return <ApplePay />;
+    },
+  }
 };
 
 type Props = {};
@@ -180,6 +189,13 @@ export default class App extends Component<Props, State> {
             title="NativeWebpage"
             onPress={() => this._changeTest('NativeWebpage')}
           />
+          {Platform.OS === 'ios' && (
+              <Button
+                  testID="testType_applePay"
+                  title="ApplePay"
+                  onPress={() => this._changeTest('ApplePay')}
+              />
+          )}
         </View>
 
         {restarting ? null : (

example/examples/ApplePay.tsx

@@ -0,0 +1,23 @@
+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
+                    enableApplePay={true}
+                    source={{uri: "https://applepaydemo.apple.com/"}}
+                    automaticallyAdjustContentInsets={false}
+                />
+            </View>
+        );
+    }
+}

src/WebViewTypes.ts

@@ -626,6 +626,21 @@ export interface IOSWebViewProps extends WebViewSharedProps {
    * @platform ios
    */
   limitsNavigationsToAppBoundDomains?: boolean;
+
+  /**
+   * A Boolean value which, when set to `true`, WebView will be rendered with Apple Pay support.
+   *  Once set, websites will be able to invoke apple pay from React Native Webview.
+   *  This comes with a cost features like `injectJavaScript`, html5 History,`sharedCookiesEnabled`,
+   *  `injectedJavaScript`, `injectedJavaScriptBeforeContentLoaded` will not work
+   * {@link https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes#Payment-Request-API ApplePay Doc}
+   * if you require to send message to App , webpage has to explicitly call webkit message handler
+   * and receive it on `onMessage` handler on react native side
+   * @example
+   *     window.webkit.messageHandlers.ReactNativeWebView.postMessage("hello apple pay")
+   * @platform ios
+   * The default value is false.
+   */
+  enableApplePay?: boolean;
 }
 
 export interface MacOSWebViewProps extends WebViewSharedProps {