Flutter应用内支付功能插件in_app_payment的使用

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

Flutter应用内支付功能插件in_app_payment的使用

平台支持

Android Google Pay
iOS Apple Pay

特性

此插件帮助你将Google Pay和Apple Pay集成到你的应用程序中。

开始使用

导入插件

要开始使用此插件,在 pubspec.yaml 文件中添加 in_app_payment 作为依赖项:

dependencies:
  in_app_payment: ^0.0.2

初始化HNGPay

在你的项目中初始化 HNGPay 类:

final pay = HNGPay();

使用Google Pay(Android)

在Android上,调用 googlePay 函数来代替你的支付按钮,并传递需要支付的金额作为参数:

pay.googlePay(context, amountToPay: "24", userID: '23');

使用Apple Pay(iOS)

在iOS上,调用 applePay 函数来代替你的支付按钮,并传递需要支付的金额作为参数:

pay.applePay(context, amountToPay: "24", userID: '23');

示例

以下代码展示了如何在应用程序中使用该插件。请注意,这只是一个简单的示例,实际使用时可能需要进行更多配置。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  /// 初始化支付包
  final pay = HNGPay();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("Payment test"),
      ),
      body: Center(
        child: SizedBox(
          child: pay.googlePay(context, amountToPay: "24", userID: '23'),
          /// 接受金额和用户ID
        ),
      ),
    );
  }
}

更多关于Flutter应用内支付功能插件in_app_payment的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用内支付功能插件in_app_payment的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter应用中使用in_app_payment插件来实现应用内支付功能的代码示例。请注意,in_app_payment插件目前主要支持Google Play和App Store的支付功能,你需要根据具体的平台进行相应的配置。

首先,确保你的Flutter项目已经添加了in_app_payment插件。在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  in_app_purchase: ^x.y.z  # 请使用最新版本号

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

接下来,你需要配置Google Play和App Store的应用内购买项目。这包括设置产品ID、价格、描述等信息。具体步骤请参考Google Play和App Store的官方文档。

下面是一个简单的Flutter代码示例,展示了如何使用in_app_purchase插件来查询和购买应用内商品:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PurchaseScreen(),
    );
  }
}

class PurchaseScreen extends StatefulWidget {
  @override
  _PurchaseScreenState createState() => _PurchaseScreenState();
}

class _PurchaseScreenState extends State<PurchaseScreen> {
  late InAppPurchaseConnection _purchaseConnection;
  late List<ProductDetails> _products;
  late List<PurchaseDetails> _purchases;
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _purchaseConnection = InAppPurchaseConnection.instance;

    _setupPurchases();
  }

  Future<void> _setupPurchases() async {
    try {
      // 查询可用的产品
      ProductDetailsResponse productResponse = await _purchaseConnection.queryProductDetails([
        'your_product_id_1', // 替换为你的产品ID
        'your_product_id_2', // 替换为你的产品ID
      ]);

      if (productResponse.productDetails.isEmpty) {
        // 处理无法获取产品详情的情况
        return;
      }

      setState(() {
        _products = productResponse.productDetails;
        _purchases = [];
        _loading = false;
      });

      // 监听购买更新
      _purchaseConnection.purchaseUpdatedStream.listen((purchaseDetailsList) {
        setState(() {
          _purchases = purchaseDetailsList;
          // 处理购买完成后的逻辑,比如更新UI或解锁内容
          _consumePurchases(purchaseDetailsList);
        });
      }, onDone: () {
        _purchaseConnection.endConnection();
      });
    } catch (e) {
      // 处理错误
      print(e);
      setState(() {
        _loading = false;
      });
    }
  }

  Future<void> _consumePurchases(List<PurchaseDetails> purchases) async {
    for (PurchaseDetails purchase in purchases) {
      if (purchase.pendingCompletion == true) {
        try {
          await _purchaseConnection.completePurchase(purchase);
        } catch (e) {
          print("Failed to complete purchase: $e");
        }
      }
    }
  }

  Future<void> _buyProduct(ProductDetails product) async {
    try {
      PurchaseParam purchaseParam = PurchaseParam(
        productDetails: product,
        applicationUserName: 'user_id_123', // 替换为用户的唯一标识符
      );

      PurchaseResult result = await _purchaseConnection.buyNonConsumable(
        purchaseParam: purchaseParam,
      );

      if (result.responseCode == BillingResponseCode.ok) {
        // 处理购买成功的逻辑
        print("Purchase successful: ${result.purchaseDetails}");
      } else {
        // 处理购买失败的情况
        print("Purchase failed: ${result.debugMessage}");
      }
    } catch (e) {
      // 处理购买过程中的错误
      print("Error while purchasing: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('In-App Purchases'),
      ),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : ListView(
              children: <Widget>[
                for (ProductDetails product in _products)
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: ListTile(
                      title: Text(product.title),
                      subtitle: Text(product.price),
                      trailing: IconButton(
                        icon: Icon(Icons.shopping_cart),
                        onPressed: () => _buyProduct(product),
                      ),
                    ),
                  ),
                for (PurchaseDetails purchase in _purchases)
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: ListTile(
                      title: Text("Purchase successful: ${purchase.productID}"),
                    ),
                  ),
              ],
            ),
    );
  }
}

在这个示例中,我们做了以下几件事情:

  1. 初始化InAppPurchaseConnection实例。
  2. 查询应用内购买的产品详情。
  3. 监听购买更新流,处理购买完成后的逻辑。
  4. 提供一个按钮来购买产品,并在购买成功后显示购买成功的消息。

请根据你的具体需求调整代码,比如添加错误处理、用户身份验证等逻辑。此外,别忘了在Google Play和App Store上配置相应的产品ID和价格。

回到顶部