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);
}
}
代码：
<!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
我假设这是各种语言(如PHP(的类型转换，可能stripe在该服务中使用PHP，所以：
payment_method_types[]': ['card']
我在这里找不到[]