如何在Flutter Web应用中调用Iamport的IMP.init与IMP.request_pay

你目前的思路方向没问题，但在JS互调用的类型处理和回调传递上有几处需要修正，以下是完整的正确实现方案：

1. 完善JS互调用的Dart定义 #

首先补充js_util库处理Dart对象到JS对象的转换，同时明确回调函数的类型定义：

import 'package:js/js.dart';
import 'package:js/js_util.dart';

// 定义Iamport返回的响应对象，标记为JS匿名对象
@anonymous
@JS()
class IamportResponse {
  external bool get success;
  external String get imp_uid;
  external String get merchant_uid;
  external String get error_msg;
  // 可根据实际需求添加更多返回字段
}

// 定义回调函数的类型
typedef IamportCallback = void Function(IamportResponse rsp);

// 正确绑定IMP的两个方法
@JS('IMP.init')
external void init(String merchantId);

@JS('IMP.request_pay')
external void requestPay(dynamic paymentData, IamportCallback callback);

2. 构造支付参数并发起请求 #

Dart的Map无法直接传递给JS函数，需要用jsify转换为JS可识别的对象；同时回调函数必须用allowInterop包裹，让JS能正常调用：

// 生成唯一商户订单号的示例函数
String makeMerchantUid() {
  return DateTime.now().millisecondsSinceEpoch.toString();
}

void startIamportPayment() {
  // 初始化Iamport
  init("imp67011510");

  // 构造支付参数
  final paymentParams = {
    'pg': 'kcp',
    'pay_method': 'card',
    'merchant_uid': "IMP${makeMerchantUid()}",
    'name': 'carrot 10kg',
    'amount': 50000,
    'buyer_email': 'Iamport@chai.finance',
    'buyer_name': 'Paul',
    'buyer_tel': '010-1234-5678',
    'buyer_addr': 'Somewhere in Korea',
    'buyer_postcode': '123-456',
    'display': {
      'card_quota': [0]
    }
  };

  // 将Dart对象转换为JS对象
  final jsPaymentParams = jsify(paymentParams);

  // 定义回调函数，用allowInterop包裹
  final paymentCallback = allowInterop((IamportResponse rsp) {
    if (rsp.success) {
      print('支付成功，订单号：${rsp.merchant_uid}');
      // 此处添加支付成功后的业务逻辑，比如后端验证等
    } else {
      print('支付失败，原因：${rsp.error_msg}');
      // 处理支付失败逻辑
    }
  });

  // 发起支付请求
  requestPay(jsPaymentParams, paymentCallback);
}

3. 关键注意事项 #

• 确保/web/index.html中已正确引入Iamport的JS脚本，放置在<head>标签内即可
• 回调函数必须用allowInterop包裹，否则JS无法识别Dart函数
• merchant_uid需保证全局唯一，建议用时间戳或后端生成的唯一标识
• 可根据Iamport官方文档，给IamportResponse补充更多返回字段，方便在Dart中直接访问

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