Flutter支付集成插件paystack_flutterwave_url的使用

Flutter支付集成插件paystack_flutterwave_url的使用

简介

paystack_flutterwave_url 是一个简单的Flutter插件，用于通过Paystack和Flutterwave的结账URL进行支付。该插件允许你无缝地将用户重定向到相应的支付网关，并处理支付成功或失败的回调。

功能

• 支持 Paystack 和 Flutterwave 网关。
• 处理支付成功和失败的回调。
• 在重定向过程中提供可自定义的加载小部件。

示例图片

完整示例代码

以下是一个完整的示例，帮助你将 paystack_flutterwave_url 插件集成到你的Flutter应用程序中：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const PaymentPage(),
      routes: {
        '/success': (context) => const SuccessPage(), // 支付成功页面
        '/failed': (context) => const FailedPage(),   // 支付失败页面
        '/payment': (context) => const PaymentPage(), // 支付页面
      },
    );
  }
}

class PaymentPage extends StatefulWidget {
  const PaymentPage({super.key});

  [@override](/user/override)
  State<PaymentPage> createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  void navToPay() {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return RedirectionToPaymentScreen(
            gatewayType: GatewayType.paystack, // 切换为 GatewayType.flutterwave 可以选择Flutterwave
            checkoutUrl: "https://checkout.paystack.com/35yt4nh0tix8gea", // Paystack 或 Flutterwave 的结账URL
            onSuccess: () {
              // 支付成功时调用
              Navigator.pushReplacementNamed(context, '/success');
            },
            onFailure: () {
              // 支付失败时调用
              Navigator.pushReplacementNamed(context, '/failed');
            },
            loadingWidget: const Center(
              child: CircularProgressIndicator(
                color: Colors.purple, // 加载时显示的进度条颜色
              ),
            ),
          );
        },
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("支付"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: navToPay,
          child: const Text("前往支付"),
        ),
      ),
    );
  }
}

// 支付成功页面
class SuccessPage extends StatelessWidget {
  const SuccessPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("支付成功"),
      ),
      body: const Center(
        child: Text("支付成功！"),
      ),
    );
  }
}

// 支付失败页面
class FailedPage extends StatelessWidget {
  const FailedPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("支付失败"),
      ),
      body: const Center(
        child: Text("支付失败，请重试。"),
      ),
    );
  }
}