Flutter Web中如何向PagSeguro JS加密函数传递Map参数？

核心问题：Dart Map 与 JS 对象的类型不兼容 #

PagSeguro的encryptCard方法接收的是JavaScript原生对象，直接传入Dart的Map会导致JS无法正确解析字段类型或结构，从而抛出参数无效错误。必须将Dart对象转换为JS原生对象后再传递。

正确实现步骤 #

1. 确保脚本加载时机 #

确认index.html中已正确引入PagSeguro脚本，且需等待脚本加载完成后再调用加密方法（可通过Flutter的WidgetsBinding.instance.addPostFrameCallback确保时机）：

<!-- index.html 头部添加 -->
<script src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.min.js"></script>

2. 使用js.JsObject.jsify()转换参数 #

导入dart:js包，将Dart参数结构转为JS原生对象，这是让PagSeguro正确识别参数的关键：

import 'dart:js' as js;

void encryptCreditCard() {
  // 构造符合要求的Dart参数（严格遵循字段格式要求）
  final cardParams = {
    'publicKey': '你的PagSeguro公钥',
    'holder': '持卡人全名',
    'number': '4111111111111111', // 无空格的纯数字字符串
    'expirationMonth': '05', // 必须是两位字符串，如"01"而非数字1
    'expirationYear': '25',  // 必须是两位字符串，如"25"而非2025
    'securityCode': '123'
  };

  // 将Dart Map转为JS原生对象
  final jsCardParams = js.JsObject.jsify(cardParams);

  try {
    // 调用PagSeguro加密方法
    final encryptedCard = js.context['PagSeguro'].callMethod('encryptCard', [jsCardParams]);
    print('加密结果: $encryptedCard');
    // 后续处理加密后的卡片信息
  } catch (e) {
    print('加密错误: $e');
  }
}

3. 关键参数格式强制校验 #

即使转换为JS对象，参数格式不符合要求仍会报错，需严格遵循：

• number: 纯数字字符串，不能包含空格、连字符等分隔符
• expirationMonth: 两位字符串（范围"01"-"12"），禁止传入数字类型
• expirationYear: 两位字符串（取年份后两位），禁止传入完整年份
• securityCode: 3或4位纯数字字符串（根据信用卡类型）
• holder: 与卡面完全一致的持卡人姓名字符串

额外排查点 #

• 检查publicKey是否为PagSeguro提供的有效公钥
• 若仍报错，可直接在浏览器控制台执行JS代码测试参数有效性，排除Dart转换之外的问题：

// 浏览器控制台测试代码
const testParams = {
  publicKey: '你的PagSeguro公钥',
  holder: '持卡人全名',
  number: '4111111111111111',
  expirationMonth: '05',
  expirationYear: '25',
  securityCode: '123'
};
const encrypted = PagSeguro.encryptCard(testParams);
console.log(encrypted);

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