如何在Flutter中集成Afterpay？已有其他支付集成经验求指导

Afterpay 目前没有官方适配 Flutter 的 SDK，采用 WebView 加载支付页面的方案完全可行，和你之前集成 PayPal 的 WebView 逻辑基本一致，具体实现步骤如下：

实现步骤 #

1. 后端生成支付链接 #

先通过后端对接 Afterpay 支付 API，创建支付会话并生成包含订单金额、回调地址等必要参数的支付跳转 URL，参数要求参考 Afterpay 官方文档。

2. 集成 WebView 插件 #

使用 webview_flutter 插件（或你之前集成 PayPal 时用的 WebView 插件），在 pubspec.yaml 添加依赖：

dependencies:
  webview_flutter: ^4.4.0

3. 构建支付页面并处理回调 #

创建 Flutter 页面加载支付 URL，同时监听导航事件捕获支付完成/取消的回调：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class AfterpayPaymentPage extends StatefulWidget {
  final String payUrl;
  const AfterpayPaymentPage({super.key, required this.payUrl});

  @override
  State<AfterpayPaymentPage> createState() => _AfterpayPaymentPageState();
}

class _AfterpayPaymentPageState extends State<AfterpayPaymentPage> {
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..loadRequest(Uri.parse(widget.payUrl))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            // 拦截预设的成功/取消回调地址
            if (request.url.contains('/afterpay-success')) {
              // 支付成功，返回结果并关闭页面
              Navigator.pop(context, true);
              return NavigationDecision.prevent;
            } else if (request.url.contains('/afterpay-cancel')) {
              // 支付取消，返回结果并关闭页面
              Navigator.pop(context, false);
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Afterpay 支付')),
      body: WebViewWidget(controller: _webViewController),
    );
  }
}

4. 后端验证支付结果 #

前端回调仅作为用户操作反馈，必须通过后端调用 Afterpay 查询 API 验证支付状态，确认订单真实支付成功后，再将结果同步给 Flutter 客户端，避免前端篡改数据的风险。

关键注意点 #

• Android 需添加网络权限（android.permission.INTERNET），iOS 若使用 HTTP 链接需在 Info.plist 配置 ATS 例外
• 测试阶段使用 Afterpay 沙箱环境，避免产生真实交易
• 严格按照 Afterpay 要求传递订单参数（如金额、货币类型），避免支付失败

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