#13738 In-app browser payment

Strides-APP/app/pages/payment/PaymentConfig.js

@@ -15,6 +15,7 @@ export const PAYTYPE = {
 export const PaymentDefault = {
   is2c2p: true, //是否启用2C2P
   enablePayPerUse: true, //是否启用按次支付
+  enableInnerWebView: false, //是否启用内部浏览器执行支付
   DEFAULT: {
     payType: PAYTYPE.CREDIT_WALLET,
     payName: "Credit Wallet",

Strides-APP/app/pages/payment/PaymentWeb.js

@@ -3,13 +3,18 @@
  * @邠心vbe on 2022/01/10
  */
 import React, { Component } from 'react';
-import { View, AppState, Linking } from 'react-native';
+import { View, AppState, Linking, StyleSheet, Image } from 'react-native';
+import * as Progress from 'react-native-progress';
+import WebView from 'react-native-webview';
+import TextView from '../../components/TextView';
+import { PaymentDefault } from './PaymentConfig';
 
 export default class PaymentWeb extends Component {
   constructor(props) {
     super(props);
     this.state = {
       isCallback: false,
+      progress: 0,
       paymentInfo: {
         url: '',
         amount: 0,
@@ -27,18 +32,12 @@ export default class PaymentWeb extends Component {
       this.setState({
         isCallback: true,
         paymentInfo: param
-      }, () => Linking.openURL(param.url));
+      }, () => this.init());
     }
     this.stateListener = AppState.addEventListener("change", state => {
       if (state == 'active' && this.state.isCallback) {
-        console.log(state);
-        this.setState({
-          isCallback: false
-        }, () => {
-          setTimeout(() => {
-            goBack();
-          }, 500);
-        });
+        //console.log("AppState", state);
+        this.completePayment();
       }
     });
     /*this.props.navigation.addListener('beforeRemove', e => {
@@ -66,11 +65,113 @@ export default class PaymentWeb extends Component {
     }
   }
 
+  init() {
+    if (!PaymentDefault.enableInnerWebView) {
+      setTimeout(() => {
+        Linking.openURL(this.state.paymentInfo.url)
+      }, 500);
+    }
+  }
+
+  completePayment() {
+    this.setState({
+      isCallback: false
+    }, () => {
+      setTimeout(() => {
+        goBack();
+      }, 500);
+    });
+  }
+
+  onPostMessage(data) {
+    console.log('WebviewMessage', data)
+    this.completePayment();
+  }
+
   render() {
-    return (
-      <View>
-        
-      </View>
-    );
+    if (PaymentDefault.enableInnerWebView) {
+      return (
+        <View style={styles.container}>
+          <Progress.Bar
+            style={styles.progress}
+            width={$vw(100)}
+            height={2}
+            color={colorPrimaryDark}
+            borderWidth={0}
+            borderRadius={0}
+            progress={this.state.progress}/>
+          <WebView
+            style={ui.flex1}
+            source={{ uri: this.state.paymentInfo.url}}
+            mixedContentMode={'always'}
+            applicationNameForUserAgent={'vbe_lumi/1.0'}
+            onLoadProgress={({nativeEvent}) => this.setState({ progress: nativeEvent.progress }) }
+            onLoadEnd={(e) => {
+              //console.log('webview-end', e)
+              this.setState({ progress: 0 }) 
+            }}
+            onMessage={e => this.onPostMessage(e.nativeEvent.data)}/>
+        </View>
+      );
+    } else {
+      return (
+        <View style={styles.container}>
+          { this.state.isCallback &&
+            <View style={styles.center}>
+              <View style={styles.loadingIcon}>
+                { isIOS
+                ? <Image
+                    style={styles.loadingIconImage}
+                    source={require('../../images/icon/loading.gif')}/>
+                : <Progress.CircleSnail
+                    size={56}
+                    duration={667}
+                    thickness={4}
+                    color={[colorAccent]}
+                    direction={'clockwise'}
+                    spinDuration={2000}/>
+                }
+              </View>
+              <EndView/>
+              <TextView style={styles.loadingText}>{$t("nav.loading")}</TextView>
+            </View>
+          }
+        </View>
+      )
+    }
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: pageBackground
+  },
+  progress: {
+    top: 0,
+    left: 0,
+    zIndex: 10,
+    position: 'absolute'
+  },
+  center: {
+    flex: 1,
+    paddingBottom: 56,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loadingText: {
+    fontSize: 12,
+    color: textSecondary
+  },
+  loadingIcon: {
+    width: 56,
+    height: 56,
+    overflow: 'hidden',
+    borderRadius: 56
+  },
+  loadingIconImage: {
+    width: 56,
+    height: 56,
+    transform: [{scale: 1.5}]
+  }
+})