如何在Flutter应用/网页中导入JS库并调用卡片加密功能？

由于PagSeguro仅提供浏览器端JS加密方案，Flutter无法直接执行该脚本，最稳妥的实现方式是通过WebView嵌入本地HTML对接加密逻辑，具体步骤如下：

1. 准备本地HTML文件 #

在Flutter项目的assets目录下创建pagseguro_encrypt.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>
</head>
<body>
<script>
// 接收Flutter传递的卡片数据并执行加密
function encryptCard(data) {
    try {
        const card = PagSeguro.encryptCard({
            publicKey: data.publicKey,
            holder: data.holder,
            number: data.number,
            expMonth: data.expMonth,
            expYear: data.expYear,
            securityCode: data.securityCode
        });
        // 将加密结果回调给Flutter
        window.flutter_inappwebview.callHandler('onEncryptResult', {encryptedCard: card.encryptedCard, error: null});
    } catch (e) {
        window.flutter_inappwebview.callHandler('onEncryptResult', {encryptedCard: null, error: e.message});
    }
}
</script>
</body>
</html>

2. 配置依赖与资源 #

在pubspec.yaml中添加WebView依赖和资源路径配置：

dependencies:
  flutter_inappwebview: ^6.0.0 # 可根据项目需求选择适配版本

flutter:
  assets:
    - assets/pagseguro_encrypt.html

3. 实现Flutter端交互逻辑 #

创建页面组件，完成WebView加载、卡片数据传递、加密结果接收：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'dart:convert';

class PagSeguroCardEncryptPage extends StatefulWidget {
  const PagSeguroCardEncryptPage({super.key});

  @override
  State<PagSeguroCardEncryptPage> createState() => _PagSeguroCardEncryptPageState();
}

class _PagSeguroCardEncryptPageState extends State<PagSeguroCardEncryptPage> {
  InAppWebViewController? _webViewController;
  bool _isEncrypting = false;

  // 触发卡片加密操作
  Future<void> _encryptCard() async {
    if (_webViewController == null) return;
    setState(() => _isEncrypting = true);

    // 实际场景中替换为用户输入的真实卡片数据
    final cardData = {
      'publicKey': 'MINHA_CHAVE_PUBLICA',
      'holder': 'Nome Sobrenome',
      'number': '4242424242424242',
      'expMonth': '12',
      'expYear': '2030',
      'securityCode': '123'
    };

    // 向WebView中的JS传递数据并调用加密函数
    await _webViewController!.evaluateJavascript(
      source: 'encryptCard(${jsonEncode(cardData)});'
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('卡片加密')),
      body: Column(
        children: [
          Expanded(
            child: InAppWebView(
              initialFile: 'assets/pagseguro_encrypt.html',
              onWebViewCreated: (controller) => _webViewController = controller,
              onLoadStop: (controller, url) async {
                // 注册JS回调，接收加密结果
                await controller.addJavaScriptHandler(
                  handlerName: 'onEncryptResult',
                  callback: (args) {
                    setState(() => _isEncrypting = false);
                    final result = args.first as Map;
                    if (result['error'] != null) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('加密失败：${result['error']}'))
                      );
                      return;
                    }
                    final encryptedCard = result['encryptedCard'];
                    // 此处拿到加密数据，可直接调用支付API提交处理
                    print('加密结果：$encryptedCard');
                    // TODO: 集成支付API，传递encryptedCard完成支付流程
                  }
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: _isEncrypting ? null : _encryptCard,
            child: _isEncrypting 
                ? const CircularProgressIndicator(color: Colors.white) 
                : const Text('加密卡片'),
          )
        ],
      ),
    );
  }
}

注意事项 #

• 确保设备网络正常，WebView能成功加载PagSeguro的JS脚本
• 实际场景中卡片数据必须来自用户输入，绝对不能硬编码敏感信息
• 加密操作需由用户主动触发（如点击按钮），符合支付安全规范
• 若遇到跨域问题，flutter_inappwebview默认配置已支持大部分场景，无需额外修改

内容的提问来源于stack exchange，提问作者WesleyAlmont