Flutter支付功能插件pay的使用

Flutter应用程序可以通过pay插件轻松集成支付功能，支持Google Pay（Android）和Apple Pay（iOS）。本文将详细介绍如何设置、配置和使用此插件，并提供完整的示例代码。

平台支持

开始使用

在开始之前，请确保你已经为计划支持的支付提供商创建了账户并按照其要求完成了相关设置：

Apple Pay 设置

1. 查看集成要求。
2. 创建一个商户标识符。
3. 创建一个支付处理证书，以加密支付信息。

Google Pay 设置

1. 查看集成要求。
2. 注册并登录商家控制台，创建账户。

使用方法

要开始使用此插件，请在pubspec.yaml文件中添加pay作为依赖项：

dependencies:
  pay: ^3.1.0

定义支付提供商的配置。请参考官方文档中的参数说明：Apple Pay 和 Google Pay，或者查看包内的示例配置。

示例代码

以下是一个完整的示例应用，展示了如何配置和使用pay插件进行支付操作：

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

import 'payment_configurations.dart' as payment_configurations;

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

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '99.99',
    status: PaymentItemStatus.final_price,
  )
];

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Pay for Flutter Demo',
      localizationsDelegates: [
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('es', ''),
        Locale('de', ''),
      ],
      home: PaySampleApp(),
    );
  }
}

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

  @override
  State<PaySampleApp> createState() => _PaySampleAppState();
}

class _PaySampleAppState extends State<PaySampleApp> {
  late final Future<PaymentConfiguration> _googlePayConfigFuture;

  @override
  void initState() {
    super.initState();
    _googlePayConfigFuture =
        PaymentConfiguration.fromAsset('default_google_pay_config.json');
  }

  void onGooglePayResult(paymentResult) {
    debugPrint(paymentResult.toString());
  }

  void onApplePayResult(paymentResult) {
    debugPrint(paymentResult.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('T-shirt Shop'),
      ),
      backgroundColor: Colors.white,
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        children: [
          Container(
            margin: const EdgeInsets.symmetric(vertical: 20),
            child: const Image(
              image: AssetImage('assets/images/ts_10_11019a.jpg'),
              height: 350,
            ),
          ),
          const Text(
            "Amanda's Polo Shirt",
            style: TextStyle(
              fontSize: 20,
              color: Color(0xff333333),
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 5),
          const Text(
            '\$50.20',
            style: TextStyle(
              color: Color(0xff777777),
              fontSize: 15,
            ),
          ),
          const SizedBox(height: 15),
          const Text(
            'Description',
            style: TextStyle(
              fontSize: 15,
              color: Color(0xff333333),
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 5),
          const Text(
            'A versatile full-zip that you can wear all day long and even...',
            style: TextStyle(
              color: Color(0xff777777),
              fontSize: 15,
            ),
          ),
          // Example pay button configured using an asset
          FutureBuilder<PaymentConfiguration>(
              future: _googlePayConfigFuture,
              builder: (context, snapshot) =>
                  snapshot.hasData
                      ? GooglePayButton(
                          paymentConfiguration: snapshot.data!,
                          paymentItems: _paymentItems,
                          type: GooglePayButtonType.buy,
                          margin: const EdgeInsets.only(top: 15.0),
                          onPaymentResult: onGooglePayResult,
                          loadingIndicator: const Center(
                            child: CircularProgressIndicator(),
                          ),
                        )
                      : const SizedBox.shrink()),
          // Example pay button configured using a string
          ApplePayButton(
            paymentConfiguration: payment_configurations.defaultApplePayConfig,
            paymentItems: _paymentItems,
            style: ApplePayButtonStyle.black,
            type: ApplePayButtonType.buy,
            margin: const EdgeInsets.only(top: 15.0),
            onPaymentResult: onApplePayResult,
            loadingIndicator: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
          const SizedBox(height: 15)
        ],
      ),
    );
  }
}

在这个例子中，我们首先通过PaymentConfiguration.fromAsset从资源文件加载Google Pay的配置，然后分别使用GooglePayButton和ApplePayButton来展示支付按钮。当用户点击这些按钮时，会触发相应的回调函数（如onGooglePayResult），你可以在这里处理支付结果或将其发送到服务器。

高级用法

如果你需要更细粒度地控制每个请求和按钮的行为，可以创建一个Pay客户端实例，并独立地向布局中添加按钮。此外，还可以使用userCanPay方法检查用户是否能够使用特定的支付方式，以及订阅支付结果事件等高级功能。

有关更多详细信息，请参阅官方文档和其他相关资源。