Flutter webview PayPal 对接错误？

Question

我想像这样集成 PayPal 按钮： https://developer.paypal.com/demo/checkout/#/pattern/client

我将此示例代码放入 HTML 文件中 (

assets/paypal.html

)，然后从资源中读取到 WebView 中：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _loadHtml();
        },
      ),
    );
  }

  void _loadHtml() async {
    String fileText = await rootBundle.loadString('assets/paypal.html');
    _controller!.loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
  }

但是我收到此错误（未捕获错误：按钮的引导错误）：

[INFO:CONSOLE(2)] "insertPPTM [object Object]", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2) [INFO:CONSOLE(2)] "Uncaught Error: Bootstrap Error for buttons:

Can not read window host

Error: Can not read window host
    at j (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:18528)
    at B (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:18625)
    at zt (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:58764)
    at Cu (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:288789)
    at Object.__get__ (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:288874)
    at o (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:291801)
    at https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:291984
    at Module.<anonymous> (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:292214)
    at t (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:157)
    at https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:941", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2) [INFO:CONSOLE(2)] "Uncaught Error: Bootstrap Error for common:

Can not read window host

Error: Can not read window host
    at j (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:18528)
    at B (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:18625)
    at zt (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:58764)
    at Iu (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:289405)
    at Object.__get__ (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:289453)
    at o (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:291801)
    at https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:291984
    at Module.<anonymous> (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:292214)
    at t (https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:157)
    at https://www.paypal.com/sdk/js?client-id=test&currency=USD:2:941", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2) [INFO:CONSOLE(2)] "unhandled_error [object Object]", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2) [INFO:CONSOLE(2)] "unhandled_error [object Object]", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2) [INFO:CONSOLE(2)] "Uncaught Error: Can not read window host", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2) [INFO:CONSOLE(2)] "Uncaught Error: Can not read window host", source: https://www.paypal.com/sdk/js?client-id=test&currency=USD (2)

我尝试了2个flutter WebView插件，同样的错误（webview_flutter 2.0.10，flutter_webview_plugin 0.4.0）

Answer 1

PayPal 无法从网络视图中使用，如 文档所述。

请勿使用 WebView 在您的应用程序中显示 PayPal 网页 应用

您的应用程序不得使用WebView或类似的自定义浏览器 PayPal 网页的显示机制。相反，使用适当的 PayPal SDK 用于管理 PayPal 体验或启动 PayPal 网络 系统浏览器内的页面或批准的浏览器视图机制 例如 iOS 上的 Safari View Controller 或 Chrome 上的自定义选项卡 安卓。

如果可能，使用弹出桥来逃避网络视图：

• https://github.com/braintree/popup-bridge-ios
• https://github.com/braintree/popup-bridge-android

Answer 2

我能够解决这个错误，因为我意识到一些我不欠的cookie被发送到paypal，一个简单的解决方案是这样的：

const jsScript=`

 if(!window.location.hostname.includes('paypal'){
 
 //your code....
 
 }
`