Flutter集成Razorpay：支付成功页面瞬消，如何跳转自定义成功页？

核心问题定位 #

你遇到的现象是因为Razorpay默认成功弹窗触发后，未拦截默认页面返回逻辑，且代码未在支付成功回调中主动触发自定义页面导航。

解决步骤 #

1. 正确配置Razorpay回调 #

初始化Razorpay实例时，必须绑定onPaymentSuccess回调，这是跳转自定义页面的核心入口：

import 'package:razorpay_flutter/razorpay_flutter.dart';

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  late Razorpay _razorpay;

  @override
  void initState() {
    super.initState();
    _razorpay = Razorpay();
    // 绑定支付回调
    _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
    _razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
    _razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
  }

  @override
  void dispose() {
    super.dispose();
    _razorpay.clear(); // 清理资源，避免内存泄漏
  }

  // 支付成功回调：触发自定义页面跳转
  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    // 确保在UI线程执行导航
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => PaymentSuccessScreen(
            paymentId: response.paymentId,
            orderId: response.orderId,
            signature: response.signature,
          ),
        ),
      );
    });
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    // 处理支付失败逻辑，比如弹窗提示错误信息
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    // 处理外部钱包支付后的逻辑
  }

  // 发起支付的方法
  void _openCheckout() {
    var options = {
      'key': 'YOUR_RAZORPAY_KEY',
      'amount': 100, // 单位为最小货币单位，如1卢比=100
      'name': '商家名称',
      'description': '商品描述',
      'prefill': {'contact': '1234567890', 'email': 'test@example.com'},
      'external': {'wallets': ['paytm']}
    };

    try {
      _razorpay.open(options);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('支付页面')),
      body: Center(
        child: ElevatedButton(
          onPressed: _openCheckout,
          child: const Text('发起支付'),
        ),
      ),
    );
  }
}

2. 自定义支付成功页面示例 #

创建PaymentSuccessScreen展示交易详情：

class PaymentSuccessScreen extends StatelessWidget {
  final String? paymentId;
  final String? orderId;
  final String? signature;

  const PaymentSuccessScreen({
    Key? key,
    this.paymentId,
    this.orderId,
    this.signature,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('支付成功')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('交易详情', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            Text('支付ID: $paymentId'),
            Text('订单ID: $orderId'),
            Text('签名: $signature'),
            // 可添加更多自定义信息，如支付金额、交易时间等
          ],
        ),
      ),
    );
  }
}

3. 关键注意事项 #

• 上下文有效性：用WidgetsBinding.instance.addPostFrameCallback包裹导航逻辑，确保在UI线程执行，避免上下文失效。
• 路由替换：使用pushReplacement替代push，替换路由栈中的支付页面，防止用户返回时重复触发支付流程。
• 资源清理：页面销毁时调用_razorpay.clear()，避免回调重复触发和内存泄漏。

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