Flutter Stripe Checkout：无法从 \'Document\' 中读取 \'cookie\' 属性：Cookies 在 \'data:\' 中被禁用答案

【问题标题】：Flutter Stripe Checkout: Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:'Flutter Stripe Checkout：无法从 \'Document\' 中读取 \'cookie\' 属性：Cookies 在 \'data:\' 中被禁用
【发布时间】：2022-11-18 03:06:04
【问题描述】：

webView flutter 应用程序中的 Stripe Checkout

将 Stripe 结账与 Flutter 移动应用程序集成。在以前版本的 Flutter 和 webview_flutter 插件中使用它。

但现在它在控制台中显示此错误并将 webView 卡在初始 URL 处：

I/chromium(26312): [INFO:CONSOLE(1)] "Stripe.js requires 'allow-same-origin' if sandboxed.", source: https://js.stripe.com/v3/ (1)
I/chromium(26312): [INFO:CONSOLE(1)] "Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:' URLs.", source: https://js.stripe.com/v3/ (1)

Webview Stripe Checkout 的 Flutter 代码

class StripePaymentCheckout extends StatefulWidget {
  final String sessionId;

  const StripePaymentCheckout({Key key, this.sessionId}) : super(key: key);
  @override
  _StripePaymentCheckoutState createState() => _StripePaymentCheckoutState();
}

class _StripePaymentCheckoutState extends State<StripePaymentCheckout> {
  WebViewController _webViewController;

  String get initialUrl =>
      "data:text/html;base64,${base64Encode(const Utf8Encoder().convert(kStripeHTMLPage))}";

  static const String kStripeHTMLPage = '''
  <!DOCTYPE html>
  <html>
  <script src="https://js.stripe.com/v3/"></script>

  <head>
      <title>Stripe Checkout</title>
  </head>

  <body>
      <div style="position: absolute; text-align: center; width:100%; height:100%; top:50%;">
          <h1>Loading Stripe...!</h1>
      </div>
  </body>

  </html>
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: WebView(
          initialCookies: [
            WebViewCookie(
              name: 'sessionid',
              value: widget.sessionId,
              domain: 'https://js.stripe.com/v3/',  // <-- not sure what to do here.
            ),
          ],
          initialUrl: initialUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (webViewController) {
            _webViewController = webViewController;
          },
          onPageFinished: (String url) {
            if (url == initialUrl) {
              _redirectToStripe(widget.sessionId);
            }
          },
          navigationDelegate: (NavigationRequest request) {
            if (request.url.startsWith('https://success.com')) {
              Navigator.of(context).pop("success");
            } else if (request.url.startsWith('https://cancel.com')) {
              Navigator.of(context).pop('cancel');
            }
            return NavigationDecision.navigate;
          },
        ),
      ),
    );
  }

  Future<void> _redirectToStripe(String sessionId) async {
    final redirectToCheckoutJs = '''
    var stripe = Stripe('${dotenv.env['apiKey']}');
    
    stripe.redirectToCheckout({
      sessionId: '$sessionId'
    }).then(function (result) {
        result.error.message = 'Error'
    });
    ''';

    return await _webViewController
        .runJavascriptReturningResult(redirectToCheckoutJs);
  }
}

【问题讨论】：

如果您无法在 webview 上启用 allow-same-origin，那么您可能需要强制重定向以使用完整的浏览器（在 webview 之外），并将重定向转发到指向您的应用程序的深层链接以获取 success_url。
这意味着我需要在手机中打开一些浏览器应用程序但是为了重定向我需要深层链接才能返回应用程序以成功并取消？正确的？
您找到任何解决方法了吗？
是的，后端是在 php 中，所以 payment_method_types[]': ['card'], 我在这里丢失了 [ ]

标签： javascript flutter dart cookies stripe-payments

【解决方案1】：

编码：

  <!DOCTYPE html>
  <html>
  <script src="https://js.stripe.com/v3/"></script>

  <head>
      <title>Stripe Checkout</title>
  </head>

  <body>
      <div style="position: absolute; text-align: center; width:100%; height:100%; top:50%;">
          <h1>Loading Stripe...!</h1>
      </div>
  </body>

  </html>

需要部署在 https 上才能使您的代码正常工作。有一个人提出了同样的问题并用你可以在这里找到的代码解决了这个问题：

https://github.com/MarcinusX/flutter_stripe_demo/blob/master/lib/checkout/stripe_checkout_mobile.dart

并且他已经在以下位置托管了所需的代码：

https://marcinusx.github.io/test1/index.html

【讨论】：

它与以前的版本一起工作得很好，我将它与 2 个应用程序一起使用。我问这个人，他让我把它发布到 StackOverflow 上，因为他现在没有任何解决方案
它在测试模式下工作正常，但在发布模式下它不起作用。