0

我已经通过 Flutter 中的 web 视图集成了 Stripe 结帐页面。如果我使用条带的测试模式一切正常，但一旦我切换到生产模式，webview 就完全空白。在条纹控制台中，我可以看到页面被加载并且每次我回电话时都取消了付款，所以条纹页面正在工作。有什么建议吗？

import 'dart:convert';

import 'package:buildabuild/utils/constants.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';

const String stripeHtmlPage = '''
<!DOCTYPE html>
<html>
<script src="https://js.stripe.com/v3/"></script>
<head><title>Stripe checkout</title></head>
<body>
</body>
</html>
''';

class CheckoutScreen extends StatefulWidget {
  final String sessionId;

  const CheckoutScreen(
    this.sessionId, {
    Key? key,
  }) : super(key: key);

  @override
  _CheckoutScreenState createState() => _CheckoutScreenState();
}

class _CheckoutScreenState extends State<CheckoutScreen> {
  late WebViewController _webViewController;
  String get initialUrl =>
      'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(stripeHtmlPage))}';

  void _redirectToStripe() {
    final redirectToCheckoutJs = '''
var stripe = Stripe('$stripePublishableKeyProd');
    
stripe.redirectToCheckout({
  sessionId: '${widget.sessionId}'
}).then(function (result) {
  result.error.message = 'Error'
});
''';
    _webViewController.runJavascript(redirectToCheckoutJs);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: initialUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (webViewController) =>
              _webViewController = webViewController,
          onPageFinished: (String url) {
            if (url == initialUrl) {
              _redirectToStripe();
            }
          },
          navigationDelegate: (NavigationRequest request) {
            if (request.url == 'https://success.com/') {
              Get.back(result: 'OK');
            } else if (request.url == 'https://cancel.com/') {
              Get.back(result: 'KO');
            }
            return NavigationDecision.navigate;
          },
        ),
      ),
    );
  }
}
4

1 回答 1

0

我通过实验发现托管页面并通过服务提供它（我使用 Firebase 托管，但可以肯定它也适用于其他服务），直接打开页面解决了问题。但是我不知道为什么，如果有人有想法，欢迎他/她。

新代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';

class CheckoutScreen extends StatelessWidget {
  final String sessionId;

  const CheckoutScreen(
    this.sessionId, {
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebView(
          initialUrl: '***hosting_address***/checkout.html?sessionId=$sessionId',
          javascriptMode: JavascriptMode.unrestricted,
          navigationDelegate: (NavigationRequest request) {
            if (request.url == 'https://success.com/') {
              Get.back(result: 'OK');
            } else if (request.url == 'https://cancel.com/') {
              Get.back(result: 'KO');
            }
            return NavigationDecision.navigate;
          },
        ),
      ),
    );
  }
}
于 2022-01-13T13:32:51.450 回答