Flutter简化电商交易插件simplify_commerce的使用

在本教程中，我们将介绍如何在Flutter项目中使用simplify_commerce插件来处理支付交易。我们将逐步讲解如何初始化插件、创建支付对象以及生成卡令牌。

首先，确保你已经在项目的pubspec.yaml文件中添加了simplify_commerce依赖：

dependencies:
  simplify_commerce: ^x.x.x

然后运行flutter pub get以安装该插件。

接下来，我们来看一下完整的示例代码：

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simplify Commerce Demo'),
        ),
        body: Center(
          child: SimplifyDemo(),
        ),
      ),
    );
  }
}

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

class _SimplifyDemoState extends State<SimplifyDemo> {
  final Map<String, dynamic> data = {
    'amount': 10,
    'currency': 'USD',
    'card': {
      'number': '5555555555554444', // 示例卡号
      'expMonth': '11', // 示例过期月份
      'expYear': '2025', // 示例过期年份
      'cvc': '123', // 示例CVC码
      'name': 'John Doe', // 持卡人姓名
      'addressLine1': '123 Main St', // 地址行1
      'addressLine2': '', // 地址行2
      'addressCity': 'Anytown', // 城市
      'addressState': 'CA', // 州/省
      'addressZip': '90210', // 邮政编码
      'addressCountry': 'US', // 国家
    },
  };

  String _paymentResult = '';
  String _cardTokenResult = '';

  void _createPayment() async {
    try {
      var simplify = Simplify();
      var publicKey = 'YOUR_PUBLIC_API_KEY'; // 你的公钥
      var payment = await simplify.payment.create(data, publicKey);
      setState(() {
        _paymentResult = 'Payment created: $payment';
      });
    } catch (e) {
      setState(() {
        _paymentResult = 'Error creating payment: $e';
      });
    }
  }

  void _createCardToken() async {
    try {
      var simplify = Simplify();
      var publicKey = 'YOUR_PUBLIC_API_KEY'; // 你的公钥
      var cardToken = await simplify.card.create(data, publicKey);
      setState(() {
        _cardTokenResult = 'Card token created: $cardToken';
      });
    } catch (e) {
      setState(() {
        _cardTokenResult = 'Error creating card token: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _createPayment,
          child: Text('Create Payment'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _createCardToken,
          child: Text('Create Card Token'),
        ),
        SizedBox(height: 20),
        Text(_paymentResult),
        SizedBox(height: 20),
        Text(_cardTokenResult),
      ],
    );
  }
}

代码解释

1. 导入库：

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

2. 主应用类：

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

3. 定义UI结构：

   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Simplify Commerce Demo'),
           ),
           body: Center(
             child: SimplifyDemo(),
           ),
         ),
       );
     }
   }
   

4. 状态管理类：

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

5. 数据定义：

   final Map<String, dynamic> data = {
     'amount': 10,
     'currency': 'USD',
     'card': {
       'number': '5555555555554444',
       'expMonth': '11',
       'expYear': '2025',
       'cvc': '123',
       'name': 'John Doe',
       'addressLine1': '123 Main St',
       'addressLine2': '',
       'addressCity': 'Anytown',
       'addressState': 'CA',
       'addressZip': '90210',
       'addressCountry': 'US',
     },
   };
   

6. 异步方法：

   void _createPayment() async {
     try {
       var simplify = Simplify();
       var publicKey = 'YOUR_PUBLIC_API_KEY';
       var payment = await simplify.payment.create(data, publicKey);
       setState(() {
         _paymentResult = 'Payment created: $payment';
       });
     } catch (e) {
       setState(() {
         _paymentResult = 'Error creating payment: $e';
       });
     }
   }
   
   void _createCardToken() async {
     try {
       var simplify = Simplify();
       var publicKey = 'YOUR_PUBLIC_API_KEY';
       var cardToken = await simplify.card.create(data, publicKey);
       setState(() {
         _cardTokenResult = 'Card token created: $cardToken';
       });
     } catch (e) {
       setState(() {
         _cardTokenResult = 'Error creating card token: $e';
       });
     }
   }
   

7. UI组件：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         ElevatedButton(
           onPressed: _createPayment,
           child: Text('Create Payment'),
         ),
         SizedBox(height: 20),
         ElevatedButton(
           onPressed: _createCardToken,
           child: Text('Create Card Token'),
         ),
         SizedBox(height: 20),
         Text(_paymentResult),
         SizedBox(height: 20),
         Text(_cardTokenResult),
       ],
     );
   }