Flutter苹果支付集成插件apple_pay_flutter的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter苹果支付集成插件apple_pay_flutter的使用

1. 使用示例

下面是一个完整的Flutter项目示例，演示如何使用apple_pay_flutter插件进行Apple Pay支付。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Apple Pay Test'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Waiting for Apple Pay modal.'),
              ElevatedButton(
                onPressed: () async {
                  // To store apple payment data
                  dynamic applePaymentData;

                  // List of items with label & price
                  List<PaymentItem> paymentItems = [
                    PaymentItem(label: 'Label', amount: 1, shippingCharge: 2.00)
                  ];

                  try {
                    // initiate payment
                    applePaymentData = await ApplePayFlutter.makePayment(
                      countryCode: "US",
                      currencyCode: "SAR",
                      paymentNetworks: [
                        PaymentNetwork.visa,
                        PaymentNetwork.mastercard,
                        PaymentNetwork.amex,
                        PaymentNetwork.mada
                      ],
                      merchantIdentifier: "merchant.sa.urwayphp",
                      paymentItems: paymentItems,
                      customerEmail: "demo.user@business.com",
                      customerName: "Demo User",
                      companyName: "Concerto Soft"
                    );

                    // This logs the Apple Pay response data
                    print(applePaymentData.toString());
                  } on PlatformException {
                    print('Failed payment');
                  }
                },
                child: Text('Call payment'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的的Flutter应用，其中包含一个按钮。 当点击这个按钮时，会触发makePayment函数来处理Apple Pay支付。 如果支付成功，将打印出Apple Pay响应数据；如果支付失败，则打印出“Failed payment”。

2. 安装和设置

首先，确保你已经安装了Flutter SDK，并且你的项目依赖列表中包含了apple_pay_flutter插件。你可以通过以下命令安装：

flutter pub add apple_pay_flutter

然后，在你的pubspec.yaml文件中添加apple_pay_flutter插件：

dependencies:
  flutter:
    sdk: flutter
  apple_pay_flutter: ^x.x.x  # 请根据实际版本号替换

最后，记得在main.dart或lib/main.dart文件中导入apple_pay_flutter插件：

import 'package:apple_pay_flutter/apple_pay_flutter.dart';

更多关于Flutter苹果支付集成插件apple_pay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter苹果支付集成插件apple_pay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成Apple Pay支付功能，你可以使用apple_pay_flutter插件。以下是一个详细的代码示例，展示了如何配置和使用这个插件。

第一步：添加依赖

首先，在你的Flutter项目的pubspec.yaml文件中添加apple_pay_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  apple_pay_flutter: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

第二步：配置iOS项目

确保你的iOS项目已经正确配置了Apple Pay功能。这通常包括在Xcode中启用Apple Pay功能，并配置相应的Capabilities。

  1. 打开Xcode，选择你的项目。
  2. 转到项目的Capabilities标签页。
  3. 打开Apple Pay开关。

第三步：编写Flutter代码

以下是一个简单的Flutter应用示例，展示了如何使用apple_pay_flutter插件来请求Apple Pay支付。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Apple Pay Flutter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ApplePayConfiguration applePayConfig = ApplePayConfiguration(
    merchantIdentifier: 'merchant.com.yourmerchantid',  // 替换为你的Merchant ID
    supportedNetworks: ['visa', 'masterCard', 'amex'],
    countryCode: 'US',
    currencyCode: 'USD',
    billingContactFields: ApplePayBillingContactField.all,
    requiredBillingFields: ApplePayRequiredBillingFields.all,
    shippingMethods: [
      ApplePayShippingMethod(
        label: 'Standard Shipping',
        amount: 0,
        detail: 'Arrives in 5-7 business days',
        identifier: 'standard',
      ),
    ],
    shippingContactFields: ApplePayShippingContactField.all,
    paymentSummaryItems: [
      ApplePayPaymentSummaryItem(
        label: 'Total',
        amount: 100,  // 1.00 USD
      ),
    ],
  );

  Future<void> requestApplePayPayment() async {
    try {
      final result = await ApplePayFlutter.requestPayment(applePayConfig);
      if (result != null) {
        // 处理支付结果
        if (result.status == ApplePayStatus.success) {
          print('支付成功: ${result.token}');
          // 你可以将支付token发送到你的服务器进行进一步处理
        } else if (result.status == ApplePayStatus.failed) {
          print('支付失败: ${result.error?.localizedDescription}');
        } else if (result.status == ApplePayStatus.canceled) {
          print('支付取消');
        }
      }
    } catch (e) {
      print('请求支付时发生错误: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Apple Pay Flutter Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            requestApplePayPayment();
          },
          child: Text('请求支付'),
        ),
      ),
    );
  }
}

第四步：运行应用

确保你的设备或模拟器支持Apple Pay，然后运行你的Flutter应用。点击“请求支付”按钮，你应该能够看到Apple Pay支付界面。

注意事项

  1. Merchant ID：确保你在Apple Developer账户中配置了正确的Merchant ID，并且在Xcode的Capabilities中启用了Apple Pay。
  2. 证书：你可能需要配置Apple Pay的证书和密钥，以便与你的支付网关通信。
  3. 测试：在测试环境中，你可能需要使用Apple提供的沙盒测试卡进行测试。

这个示例提供了一个基本的框架，你可以根据自己的需求进行扩展和修改。

回到顶部