Flutter支付集成插件deuna_checkout_widget的使用

Flutter支付集成插件deuna_checkout_widget的使用

概述

deuna_checkout_widget 是一个用于在 Flutter 应用程序中集成支付功能的插件。通过该插件，开发者可以轻松地将支付界面嵌入到自己的应用中。

安装

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

dependencies:
  deuna_checkout_widget: ^last_version

确保查看 pub.dev 上的最新版本。

Android 配置

在 android/app/build.gradle 文件中配置 minSdkVersion:

android {
    defaultConfig {
        minSdkVersion 20
    }
}

iOS 配置

无需任何额外配置，该插件已经准备好使用。

使用方法

1. 导入 deuna_checkout_widget 插件：

   import 'package:deuna_checkout_widget/deuna_checkout_widget.dart';
   

2. 在应用的根目录下添加插件配置：

   DeUnaCheckoutConfiguration(
       data: const DeUnaCheckoutData(
         env: DeUnaCheckoutEnv.stg, // 默认值为生产环境
         apiKey: 'YOUR_API_KEY',
         analyticsConfig: AnalyticsConfig(
           amplitudeKeyId: 'AMPLITUDE_KEY_ID', // 必填
           googleTagManagerKeyId: 'GOOGLE_TAG_MANAGER_KEY_ID', // 可选
           sessionId: 'SESSION_ID', // 可选
         ),
       ),
       child: MaterialApp(
         child: ... // 其他内容
       ),
   );
   

3. 在需要打开支付界面的地方，构建 DeUnaCheckout 小部件：

   DeUnaCheckout(
     orderToken: orderToken,
   ),
   

示例代码

以下是一个完整的示例代码，展示了如何使用 deuna_checkout_widget 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DeUnaCheckoutConfiguration(
      // 设置配置数据
      data: const DeUnaCheckoutData(
        env: DeUnaCheckoutEnv.stg, // 默认值为生产环境
        apiKey: 'YOUR_API_KEY',
      ),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'DeUna Checkout Demo'),
      ),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  void openCheckout() {
    Navigator.push<void>(
      context,
      MaterialPageRoute(
        builder: (context) => const CheckoutExample(
          orderToken: 'YOUR_ORDER_TOKEN',
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'Press the action button to open the checkout',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: openCheckout,
        tooltip: 'Open Checkout',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class CheckoutExample extends StatelessWidget {
  const CheckoutExample({
    Key? key,
    required this.orderToken,
  }) : super(key: key);

  final String orderToken;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DeUna Checkout Widget'),
      ),
      body: Center(
        child: DeUnaCheckout(
          orderToken: orderToken,
        ),
      ),
    );
  }
}