Flutter应用如何调用外部浏览器携带JSON格式POST数据打开支付页面

因为url_launcher库仅支持GET请求跳转，无法直接携带JSON格式的POST数据，这里提供两种可行方案：

方案一：本地HTML + JavaScript 自动发送POST请求 #

通过生成临时HTML文件，利用浏览器加载后执行JS代码发送带JSON体的POST请求，完成后跳转至支付视图。

步骤与代码实现 #

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.2
  url_launcher: ^6.2.5

2. 实现核心逻辑：

import 'dart:io';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:url_launcher/url_launcher.dart';

Future<void> launchPaymentPost(String paymentUrl, Map<String, dynamic> jsonPayload) async {
  // 生成带自动提交逻辑的HTML内容
  final htmlContent = '''
  <!DOCTYPE html>
  <html>
  <body>
    <script>
      fetch('$paymentUrl', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: '${jsonEncode(jsonPayload).replaceAll("'", "\\'")}'
      })
      .then(res => {
        // 跳转至支付网关返回的页面
        window.location.href = res.url;
      })
      .catch(err => {
        alert('支付请求失败，请重试');
        console.error(err);
      });
    </script>
  </body>
  </html>
  ''';

  // 写入临时HTML文件
  final tempDir = await getTemporaryDirectory();
  final tempFile = File('${tempDir.path}/payment_post.html');
  await tempFile.writeAsString(htmlContent);

  // 调用外部浏览器打开本地文件
  final fileUri = tempFile.uri.toString();
  if (await canLaunchUrl(Uri.parse(fileUri))) {
    await launchUrl(Uri.parse(fileUri), mode: LaunchMode.externalApplication);
  } else {
    throw '无法启动外部浏览器';
  }
}

// 使用示例
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('支付跳转示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              const gatewayUrl = 'https://your-payment-gateway.com/pay';
              final payload = {
                'order_id': 'ORD_20240501_001',
                'amount': 99.99,
                'currency': 'CNY',
                'user_id': 'USER_10001'
              };
              try {
                await launchPaymentPost(gatewayUrl, payload);
              } catch (e) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text(e.toString())),
                );
              }
            },
            child: const Text('发起支付'),
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 需确保支付网关支持跨域请求（CORS），否则浏览器会拦截JS发起的POST请求。
• 要对JSON字符串中的单引号做转义处理，避免破坏HTML结构。

方案二：通过后端代理（推荐生产环境使用） #

如果支付网关存在CORS限制，或需要更安全的参数传递，可先让Flutter调用自己的后端接口，由后端与支付网关交互并返回跳转链接，再用url_launcher打开该链接。

代码示例 #

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:url_launcher/url_launcher.dart';

Future<void> launchPaymentViaBackend() async {
  const backendApi = 'https://your-backend.com/api/create-payment';
  final payload = {'order_id': 'ORD_20240501_001', 'amount': 99.99};

  final response = await http.post(
    Uri.parse(backendApi),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode(payload),
  );

  if (response.statusCode == 200) {
    final result = jsonDecode(response.body);
    final paymentUrl = result['payment_url'];
    if (await canLaunchUrl(Uri.parse(paymentUrl))) {
      await launchUrl(Uri.parse(paymentUrl), mode: LaunchMode.externalApplication);
    }
  } else {
    // 处理请求失败逻辑
  }
}

优势 #

• 规避浏览器CORS限制，无需担心跨域问题。
• 敏感参数（如密钥）可由后端处理，提升安全性。

内容的提问来源于stack exchange，提问作者Mohammad Rabia Najib