Flutter二维码支付插件flutter_gbprimepay_qrcode的使用

GBPrimePay QRCode 插件允许你从GBPrimePay提供的QRCash服务请求二维码图像。

功能

• 显示来自QRCash服务的二维码
• 监听支付结果并使用Cloud Firestore查询快照存储它们
• 开始使用

要使用此插件，你可以使用 Dialog.builder() 或 Get.dialog() 添加一个包含 GBPrimePayQRCode 小部件的对话框。更多详情请参见示例文件夹。

开始使用

要使用此插件，你可以使用 Dialog.builder() 或 Get.dialog() 添加一个包含 GBPrimePayQRCode 小部件的对话框。更多详情请参见示例文件夹。

// 创建时间戳作为参考ID
final referenceNo = "202212220001";
final amount = 1.0;

// 显示带有二维码的对话框
Get.dialog(
    GBPrimePayQRCode(
    // 支付结果将被存储的Cloud Firestore集合引用
    collectionRef: FirebaseFirestore.instance.collection("payments"),
    // 唯一的支付参考号
    referenceNo: referenceNo,
    // 购买的商品描述
    detail: "Sample T-Shirt",
    // 购买金额
    amount: amount,
    // GBPrimePay将发送支付结果的回调URL
    backgroundUrl: BACKGROUND_URL,
    // 由服务提供的GBPrimePay令牌
    token: GB_TOKEN,
    // 成功支付时显示的消息
    completeMessage1: "Payment received!",
    completeMessage2: "Thank you",
    // 成功支付时关闭对话框的按钮标题
    completeButtonTitle: "Close",
    // 成功支付时按下按钮时执行的回调函数
    completeButtonOnTap: () => Get.back(),
    // 支付失败时显示的消息
    failMessage1: "Payment not complete!",
    failMessage2: "Try another payment method",
    // 支付失败时关闭对话框的按钮标题
    failButtonTitle: "Close",
    // 支付失败时按下按钮时执行的回调函数
    failButtonOnTap: () => Get.back(),
  ),
  // 使用屏幕的安全区域以避免与系统UI重叠
  useSafeArea: true,
);

在本示例中，GBPrimePayQRCode 小部件在一个对话框中显示，并使用提供的 collectionRef 监听支付结果。backgroundUrl 是GBPrimePay将发送支付结果的回调URL。token 是由服务提供的GBPrimePay令牌。该小部件还包括成功和失败支付时的消息和按钮标题。

示例代码

以下是一个完整的示例代码：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:example/firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_gbprimepay_qrcode/flutter_gbprimepay_qrcode.dart';
import 'package:get/get.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await dotenv.load(fileName: ".env");

  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // 使用Firestore模拟器
  FirebaseFirestore.instance.useFirestoreEmulator('10.0.2.2', 8088);

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'GBPrimePay QRCode Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: LayoutBuilder(builder: (context, constraints) {
          return ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: Size(constraints.maxWidth, 48),
            ),
            onPressed: () {
              // 通过gbprimapay qrcode支付

              // 创建时间戳作为参考ID
              final referenceNo =
                  DateTime.now().millisecondsSinceEpoch.toString();
              const amount = 1.0;

              // 显示对话框
              Get.dialog(
                GBPrimePayQRCode(
                  collectionRef:
                      FirebaseFirestore.instance.collection("payment"),
                  referenceNo: referenceNo,
                  detail: "Sample T-Shirt",
                  amount: amount,
                  backgroundUrl: dotenv.env['BACKGROUND_URL'] ?? "",
                  token: dotenv.env['GB_TOKEN'] ?? "",
                  completeMessage1: "Payment received!",
                  completeMessage2: "Thank You",
                  completeButtonTitle: "Close",
                  completeButtonOnTap: () => Get.back(),
                  failMessage1: "Payment not complete!",
                  failMessage2: "Try other payment method",
                  failButtonTitle: "Close",
                  failButtonOnTap: () => Get.back(),
                ),
                useSafeArea: true,
              );
            },
            child: const Text("Pay via QRCode"),
          );
        }),
      ),
    );
  }
}