支付页面在 React Native Webview 应用程序中不起作用

Question

我正在尝试为我的在线商店创建一个 ReactNative WebView 应用程序。一切正常，直到我尝试支付订单。

我遇到的错误是 我可以关闭该弹出窗口，但除了已安装的 UPI 应用程序（如 GPay）之外，它仍然不会从那里打开任何链接。

我的 App.tsx 文件是

import { View, Platform, SafeAreaView, BackHandler, Dimensions, Image, Linking } from 'react-native';
import * as React from "react";
import { useEffect, useState, useRef } from 'react';
import {WebView} from "react-native-webview";
import Constants from "expo-constants";
import NetInfo from "@react-native-community/netinfo"

const BACKGROUND_COLOR = "#53B948";
const DEVICE_WIDTH = Dimensions.get("window").width;
const DEVICE_HEIGHT = Dimensions.get("window").height;
const ANDROID_BAR_HEIGHT = Platform.OS === "android" ? Constants.statusBarHeight : 0;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default function App() {
  const WEBVIEW = useRef()
  const [backButtonEnabled, setBackButtonEnabled] = useState(false);
  const [isConnected, setConnected] =useState(true);
  const [loading, setLoading] = useState(true);

  function webViewLoaded(){
    setLoading(false);
  }

  useEffect(() => {
    const netInfoSubscribe =NetInfo.addEventListener(state => {
      setConnected(state.isConnected);
      if(!state.isConnected){
        alert('No Internet Connection');
      }
    });
    return netInfoSubscribe;
  }, []);

  function onNavigationStateChange(navState){
    setBackButtonEnabled(navState.canGoBack)
  }

  useEffect(()=> {
    function backHandler(){
      if(backButtonEnabled){
        WEBVIEW.current.goBack();
        return true;
      }
    }

    BackHandler.addEventListener("hardwareBackPress", backHandler);

    return () => BackHandler.removeEventListener("hardwareBackPress", backHandler);

  }, [backButtonEnabled]);

  return (
    <SafeAreaView style={{
      flex: 1,
      backgroundColor: BACKGROUND_COLOR
    }}>
      <View style={{
        height: ANDROID_BAR_HEIGHT,
        backgroundColor: BACKGROUND_COLOR,
        flex: 1
      }}>
      {(loading || !isConnected  ) &&(
        <View style={{
          backgroundColor: BACKGROUND_COLOR,
          position: "absolute",
          top: 0, left: 0,
          zIndex: 10,
          width: DEVICE_WIDTH,
          height: DEVICE_HEIGHT + ANDROID_BAR_HEIGHT,
          flex: 1,
          alignItems: "center",
          justifyContent: "center"
        }}>
          <Image source={require("./assets/icon.png")} style={{width: "25%"}}></Image>
        </View>
      )}
      {isConnected && (
        <View style={{
          height: Platform.OS === "android" ? Constants.statusBarHeight :  0,
          flex: 1
        }}>
          <WebView 
            onLoad={webViewLoaded}
            ref={WEBVIEW}
            onNavigationStateChange={onNavigationStateChange}
            source={{
              uri: "[My Website Here]"
            }}
            useWebKit = {true}
            style={{flex: 1, width: deviceWidth, height: deviceHeight}}
            javaScriptEnabled = {true}
            domStorageEnabled = {true}
            startInLoadingState = {true}
            scalesPageToFit = {true}
            automaticallyAdjustContentInsets = {false}
            originWhitelist={["*"]}
            thirdPartyCookiesEnabled = {true}
            sharedCookiesEnabled = {true}
            setSupportMultipleWindows = {true}
            allowsBackForwardNavigationGestures = {true}
            onError = {err => { alert(err) }}
            
          />
        </View>
      )}
      </View>
    </SafeAreaView>
  );
}

我正在尝试实现的支付网关是 CashFree

我正在尝试在 React Native 中为我的在线商店（Magento 2.4.6）创建 WebView 应用程序。

Answer 1

我也面临着同样的问题。如果我们能解决这个问题，请提供任何解决方案？