Flutter支付结账插件checkout_plugin的使用

本文档将向您展示如何在Flutter应用中使用checkout_plugin插件来集成支付网关以接受付款。

开始使用

该项目是一个用于Flutter的插件包，包含针对Android和/或iOS平台的特定实现代码。以下是开始使用的步骤：

对于Flutter开发的帮助，您可以访问官方文档，其中提供了教程、示例、移动开发指南和完整的API参考。

完整示例

以下是一个简单的示例，展示了如何在Flutter应用中使用checkout_plugin插件进行支付。

示例代码

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

import 'package:flutter/services.dart';
import 'package:checkout_plugin/checkout_plugin.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = '未知';
  late CheckoutPlugin _obj;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('支付插件示例应用'),
        ),
        body: Center(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
              RaisedButton(onPressed: openCheckout, child: Text('支付'))
            ])),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    _obj = CheckoutPlugin();
  }

  void openCheckout() async {
    var options = {
      'secureKey': '您的安全密钥',
      'requestParameters': {
        'memberId': '1234567',
        'paymentMode': 'CC',
        'terminalId': '',
        'merchantTransactionId': '唯一订单ID',
        'amount': '1.00',
        'currency': 'USD',
        'toType': 'docspartner',
        'paymentBrand': 'VISA',
        'merchantRedirectUrl': 'https://www.merchantredirecturl.com',
        'tmplAmount': '1.00',
        'tmplCurrency': 'USD',
        'orderDescription': '测试交易',
        'country': 'UK',
        'state': 'NA',
        'street': '19 Scrimshire Lane',
        'city': 'Aston',
        'email': 'abc@domain.com',
        'postCode': 'CH5 3LJ',
        'telnocc': '+44',
        'phone': '07730432996',
        'hostUrl': 'https://www.hostURL.com/',
        'device': 'ios' // 根据设备类型选择ios或android
      }
    };

    try {
      _obj.clear();
      var event_success = CheckoutPlugin.EVENT_SUCCESS;
      var event_failed = CheckoutPlugin.EVENT_FAILED;

      _obj.on(event_success, _handlePaymentSuccess);
      _obj.on(event_failed, _handlePaymentFail);
      _obj.payment(options);
    } catch (e) {
      debugPrint('错误: $e');
    }
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _obj.clear();
  }

  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    print('支付成功 主程序' + response.response.toString());
    _obj.clear();
  }

  void _handlePaymentFail(PaymentFailureResponse response) {
    print('支付失败 主程序' + response.response.toString());
    _obj.clear();
  }
}

代码解释

• 导入必要的库:

  import 'package:flutter/material.dart';
  import 'dart:async';
  
  import 'package:flutter/services.dart';
  import 'package:checkout_plugin/checkout_plugin.dart';
  

• 初始化应用:

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

• 创建主应用状态类:

  class MyApp extends StatefulWidget {
    [@override](/user/override)
    _MyAppState createState() => _MyAppState();
  }
  

• 定义状态类并初始化插件对象:

  class _MyAppState extends State<MyApp> {
    String _platformVersion = '未知';
    late CheckoutPlugin _obj;
  
    [@override](/user/override)
    void initState() {
      super.initState();
      _obj = CheckoutPlugin();
    }
  

• 构建UI:

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('支付插件示例应用'),
        ),
        body: Center(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
              RaisedButton(onPressed: openCheckout, child: Text('支付'))
            ])),
      ),
    );
  }
  

• 打开支付界面:

  void openCheckout() async {
    var options = {
      'secureKey': '您的安全密钥',
      'requestParameters': {
        'memberId': '1234567',
        'paymentMode': 'CC',
        'terminalId': '',
        'merchantTransactionId': '唯一订单ID',
        'amount': '1.00',
        'currency': 'USD',
        'toType': 'docspartner',
        'paymentBrand': 'VISA',
        'merchantRedirectUrl': 'https://www.merchantredirecturl.com',
        'tmplAmount': '1.00',
        'tmplCurrency': 'USD',
        'orderDescription': '测试交易',
        'country': 'UK',
        'state': 'NA',
        'street': '19 Scrimshire Lane',
        'city': 'Aston',
        'email': 'abc@domain.com',
        'postCode': 'CH5 3LJ',
        'telnocc': '+44',
        'phone': '07730432996',
        'hostUrl': 'https://www.hostURL.com/',
        'device': 'ios' // 根据设备类型选择ios或android
      }
    };
  

• 处理支付结果:

  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    print('支付成功 主程序' + response.response.toString());
    _obj.clear();
  }
  
  void _handlePaymentFail(PaymentFailureResponse response) {
    print('支付失败 主程序' + response.response.toString());
    _obj.clear();
  }