Flutter Web集成PayPal支付并在支付成功后注册用户的问题

问题背景 #

我在Flutter Web应用中实现注册+支付流程，步骤如下：

1. 用户填写含邮箱和密码的注册表单
2. 点击「Subscribe」按钮发起PayPal支付
3. 支付成功后调用后端API完成用户注册；支付失败则不执行注册

当前核心问题：PayPal支付成功后会跳转到指定的return_url（即$baseUrl/payment_success），但无法安全传递用户填写的邮箱和密码到该页面。URL参数传递方式存在安全风险，需要更可靠的方案。

可行解决方案 #

方案1：前端临时存储+后端支付合法性验证 #

1. 前端临时存储用户信息：用户点击「Subscribe」时，将邮箱和密码存入sessionStorage（仅会话有效，关闭浏览器即自动清除）：

   // 修改_MyHomePageState中的subscribe方法
   subscribe() {
     // 临时存储敏感信息到sessionStorage
     html.window.sessionStorage['temp_email'] = email.text;
     html.window.sessionStorage['temp_password'] = password.text;
     _service.paypalPayment();
   }
   

2. 支付成功页读取并清理数据：在payment_success页面初始化时，读取sessionStorage中的信息，调用注册API后立即删除敏感数据：

   // 在payment_success页面的initState中添加逻辑
   @override
   void initState() {
     super.initState();
     final tempEmail = html.window.sessionStorage['temp_email'];
     final tempPassword = html.window.sessionStorage['temp_password'];
     
     if (tempEmail != null && tempPassword != null) {
       // 调用注册API
       registerUser(tempEmail, tempPassword);
       // 立即清除临时存储的敏感数据
       html.window.sessionStorage.remove('temp_email');
       html.window.sessionStorage.remove('temp_password');
     } else {
       // 无有效数据，跳转回注册页
       Navigator.pushReplacementNamed(context, '/');
     }
   }
   

3. 后端关键验证：注册API必须先通过PayPal官方接口查询支付状态，确认支付真实成功后再执行注册逻辑，彻底避免恶意绕过支付直接调用注册接口的情况。

方案2：后端生成支付订单时关联用户信息 #

1. 前端先提交用户信息到后端：用户点击「Subscribe」时，先调用后端的「预注册」接口，提交邮箱和密码。后端生成唯一order_token，并将用户信息与该token关联存储（比如用Redis，设置15分钟过期时间）。
2. 后端发起PayPal支付：后端将order_token作为PayPal支付的reference_id，生成支付链接返回给前端，前端跳转至PayPal支付页面。
3. 支付成功后完成注册：PayPal跳转回return_url时会携带支付相关参数（如paymentId），前端将这些参数和order_token一起传给后端。后端验证支付合法性后，取出关联的用户信息完成注册，并清理临时存储的数据。

方案3：使用PayPal Webhook替代前端跳转 #

放弃前端跳转逻辑，改用PayPal弹窗+Webhook实现：

1. 前端弹窗支付：用户点击支付后，在当前页面打开PayPal弹窗（而非新窗口），支付完成后PayPal会回调前端脚本，此时直接调用注册API。
2. 后端Webhook验证：同时后端配置PayPal Webhook，接收支付成功的官方事件通知，双重验证支付有效性后再完成注册，避免前端篡改支付状态。

核心安全原则 #

• 无论采用哪种方案，后端必须独立验证PayPal支付的合法性，不能仅依赖前端传递的状态。
• 敏感信息（如密码）不要在前端长期存储，使用后立即清理。
• 后端存储临时用户信息时，必须设置合理的过期时间，避免数据冗余和泄露风险。

附用户原始代码 #

注册页面代码 #

class _MyHomePageState extends State<MyHomePage> {
      final PaypalService _service = PaypalService();
      final TextEditingController email = TextEditingController();
      final TextEditingController password = TextEditingController();
   
  subscribe() {
    _service.paypalPayment();
  }

  registerUser() {
    print(email.text);
    print(password.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: email,
            decoration: const InputDecoration(
              hintText: "Email",
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          TextField(
            controller: password,
            decoration: const InputDecoration(
              hintText: "Password",
            ),
          ),
          TextButton(
            onPressed: () {
              subscribe();
            },
            child: const Text("Subscribe"),
          ),
        ],
      ),
    );
  }
}

PayPal服务代码 #

import 'package:papalgateway/secret.dart';

import 'models.dart';
import 'payment_api.dart';
// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;

class PaypalService {
  Future<void> paypalPayment() async {
    PaypalSecret secret = PaypalSecret(
      clientId: Secret.clientIdSandbox,
      clientSecret: Secret.clientSecretSandbox,
      paymentMode: PaymentMode.sandbox,
    );

    PaypalPayment paymentService = PaypalPayment(paypalSecret: secret);

    Token token = await paymentService.getAccessToken(secret);

    if (token.token == null) {
      return;
    }
    Payment payment = await paymentService.createPayment(
      transactionSubscription(),
      token.token!,
    );
    if (payment.approvalUrl == null) {
      return;
    }
    html.window.open(payment.approvalUrl!, "Payment");
  }
}

支付交易配置代码 #

transactionSubscription() {
  String baseUrl = html.window.location.origin;
  Map<String, dynamic> transactions = {
    "intent": "CAPTURE",
    "purchase_units": [
      {
        // "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
        "amount": {"currency_code": "MYR", "value": "10.00"}
      }
    ],
    "payment_source": {
      "paypal": {
        "experience_context": {
          "payment_method_preference": "IMMEDIATE_PAYMENT_REQUIRED",
          "brand_name": "EXAMPLE INC",
          "locale": "en-US",
          "landing_page": "LOGIN",
          // "shipping_preference": "SET_PROVIDED_ADDRESS",
          "user_action": "PAY_NOW",
          "return_url": "$baseUrl/payment_success",
          "cancel_url": "$baseUrl/payment_failed",
        }
      }
    }
  };

  return transactions;
}

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