Flutter支付集成插件tosspayments_widget_sdk_flutter的使用

Flutter支付集成插件tosspayments_widget_sdk_flutter的使用

1. 概述

tosspayments_widget_sdk_flutter 是一个用于在Flutter应用中轻松集成TossPayments支付功能的插件。通过该插件，开发者可以快速实现支付页面的展示和支付流程的处理。

2. 安装与配置

2.1 环境要求

• Flutter 3.7.0 及以上版本
• Dart SDK 2.17.0 及以上版本
• Android minSdkVersion 19 及以上版本

2.2 安装插件

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  tosspayments_widget_sdk_flutter: ^2.0.9

2.3 Android 配置

确保在 android/app/main/AndroidManifest.xml 文件中添加互联网权限，并设置 usesCleartextTraffic 为 true，以便能够加载所有银行卡应用：

<!-- android/app/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application
        android:label="yourapp"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- 添加互联网权限 -->
        <uses-permission android:name="android.permission.INTERNET" />
    </application>
</manifest>

3. 使用示例

3.1 创建支付页面

以下是一个完整的示例代码，展示了如何使用 tosspayments_widget_sdk_flutter 插件来创建一个支付页面，并处理支付结果。

import 'package:flutter/material.dart';
import 'package:tosspayments_widget_sdk_flutter/model/payment_info.dart';
import 'package:tosspayments_widget_sdk_flutter/model/payment_widget_options.dart';
import 'package:tosspayments_widget_sdk_flutter/payment_widget.dart';
import 'package:tosspayments_widget_sdk_flutter/widgets/agreement.dart';
import 'package:tosspayments_widget_sdk_flutter/widgets/payment_method.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PaymentWidgetExamplePage(),
    );
  }
}

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

  [@override](/user/override)
  State<PaymentWidgetExamplePage> createState() {
    return _PaymentWidgetExamplePageState();
  }
}

class _PaymentWidgetExamplePageState extends State<PaymentWidgetExamplePage> {
  late PaymentWidget _paymentWidget;
  PaymentMethodWidgetControl? _paymentMethodWidgetControl;
  AgreementWidgetControl? _agreementWidgetControl;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化 PaymentWidget，传入 clientKey 和 customerKey
    _paymentWidget = PaymentWidget(clientKey: "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm", customerKey: "a1b2c3d4e5f67890");

    // 渲染支付方式选择器
    _paymentWidget
        .renderPaymentMethods(
        selector: 'methods',
        amount: Amount(value: 300, currency: Currency.KRW, country: "KR"))
        .then((control) {
      _paymentMethodWidgetControl = control;
    });

    // 渲染协议选择器
    _paymentWidget
        .renderAgreement(selector: 'agreement')
        .then((control) {
      _agreementWidgetControl = control;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('TossPayments 示例'),
        ),
        body: SafeArea(
            child: Column(children: [
              Expanded(
                  child: ListView(children: [
                    // 显示支付方式选择器
                    PaymentMethodWidget(
                      paymentWidget: _paymentWidget,
                      selector: 'methods',
                    ),
                    // 显示协议选择器
                    AgreementWidget(paymentWidget: _paymentWidget, selector: 'agreement'),
                    // 结账按钮
                    ElevatedButton(
                        onPressed: () async {
                          // 请求支付
                          final paymentResult = await _paymentWidget.requestPayment(
                              paymentInfo: const PaymentInfo(orderId: 'OrderId_123', orderName: '蓝T恤等2件商品'));
                          if (paymentResult.success != null) {
                            // 支付成功处理
                            ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(content: Text('支付成功！')),
                            );
                          } else if (paymentResult.fail != null) {
                            // 支付失败处理
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(content: Text('支付失败: ${paymentResult.fail?.message}')),
                            );
                          }
                        },
                        child: const Text('结账')),
                    // 获取选择的支付方式
                    ElevatedButton(
                        onPressed: () async {
                          final selectedPaymentMethod = await _paymentMethodWidgetControl?.getSelectedPaymentMethod();
                          print('${selectedPaymentMethod?.method} ${selectedPaymentMethod?.easyPay?.provider ?? ''}');
                        },
                        child: const Text('获取选择的支付方式')),
                    // 获取协议同意状态
                    ElevatedButton(
                        onPressed: () async {
                          final agreementStatus = await _agreementWidgetControl?.getAgreementStatus();
                          print('${agreementStatus?.agreedRequiredTerms}');
                        },
                        child: const Text('获取协议同意状态')),
                    // 更新支付金额
                    ElevatedButton(
                        onPressed: () async {
                          await _paymentMethodWidgetControl?.updateAmount(amount: 300);
                          print('支付金额已更新为 300 元');
                        },
                        child: const Text('更新支付金额'))
                  ]))
            ])));
  }
}