Flutter支付集成插件flutter_kushki的使用

Flutter支付集成插件flutter_kushki的使用

安装

1. 添加依赖到 pubspec.yaml

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

   dependencies:
     flutter_kushki: ^0.0.5
   

2. 导入包

   在您的 Dart 文件中导入以下包：

   import 'package:flutter_kushki/kushki.dart'; // 主类
   import 'package:flutter_kushki/kushki_environment.dart'; // 环境设置
   import 'package:flutter_kushki/kushki_card.dart'; // 卡片模型
   

使用

1. 实例化类

   首先，您需要实例化 Kushki 类并传入商户ID（在测试环境中）：

   Kushki kushki = Kushki(
     '<your_public_merchant_id>',
     currency: 'USD',
     environment: KushkiEnvironment.TESTING,
   );
   

2. 创建卡片数据

   创建一个 KushkiCard 实例，并设置卡的相关信息：

   final KushkiCard _card = KushkiCard();
   _card.name = 'Kushki Test';
   _card.number = '4381082002222866';
   _card.cvv = '633';
   _card.expiryMonth = '07';
   _card.expiryYear = '21';
   

3. 获取卡片令牌

   调用 requestToken 方法来获取卡片令牌。该方法接受一个 KushkiCard 对象和交易金额作为参数：

   try {
     final String token = await kushki.requestToken(_card, 30.52);
     print(token);
   } catch (e) {
     print(e.toString());
   }
   

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 flutter_kushki 插件。

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

import 'package:flutter_credit_card/flutter_credit_card.dart';
import 'package:flutter_kushki/kushki.dart';
import 'package:flutter_kushki/kushki_environment.dart';
import 'package:flutter_kushki/kushki_card.dart';

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

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

class _MyAppState extends State<MyApp> {
  Kushki _kushki;
  TextEditingController _merchantIdController;

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

  // 初始化Kushki类实例
  Future<void> initKushki(BuildContext context) async {
    setState(() {
      _kushki = Kushki(
        _merchantIdController.text,
        currency: 'USD',
        environment: KushkiEnvironment.TESTING,
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Kushki示例应用'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 16, right: 16),
                child: TextFormField(
                  decoration: InputDecoration(labelText: '商户ID'),
                  controller: _merchantIdController,
                  validator: (value) {
                    if (value.isEmpty) {
                      return "请输入您的Kushki商户ID";
                    }
                    return null;
                  },
                ),
              ),
              MaterialButton(
                color: Colors.blueAccent,
                child: Text('设置ID'),
                onPressed: () async {
                  initKushki(context);
                },
              ),
              _kushki != null
                  ? Form(
                      kushki: _kushki,
                    )
                  : Container(),
            ],
          ),
        ),
      ),
    );
  }
}

class Form extends StatefulWidget {
  final Kushki kushki;

  const Form({Key key, this.kushki}) : super(key: key);

  [@override](/user/override)
  _FormState createState() => _FormState();
}

class _FormState extends State<Form> {
  final KushkiCard _card = KushkiCard();
  final double totalAmount = 30.52;
  String _cardToken;

  bool isCvvFocused = false;

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

    _card.name = 'Kushki测试';
    _card.number = '4381082002222866';
    _card.cvv = '633';
    _card.expiryMonth = '07';
    _card.expiryYear = '21';
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CreditCardWidget(
          cardNumber: _card.number,
          expiryDate: '${_card.expiryMonth}/${_card.expiryYear}',
          cardHolderName: _card.name,
          cvvCode: _card.cvv,
          showBackView: isCvvFocused, // true 当您想要显示CVV(背面)视图时
        ),
        CreditCardForm(
          onCreditCardModelChange: onCreditCardModelChange,
        ),
        MaterialButton(
          color: Colors.blueAccent,
          child: Text('获取卡片令牌'),
          onPressed: () async {
            try {
              final String token = await widget.kushki.requestToken(_card, totalAmount);
              setState(() {
                _cardToken = token;
              });
              Scaffold.of(context).showSnackBar(
                SnackBar(
                  content: Text("令牌: $token"),
                  backgroundColor: Colors.blue,
                ),
              );
            } catch (e) {
              print(e.toString());
              Scaffold.of(context).showSnackBar(
                SnackBar(
                  content: Text(e.message),
                  backgroundColor: Colors.red,
                ),
              );
            }
          },
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(_cardToken ?? 'API返回的卡片令牌结果'),
        ),
      ],
    );
  }

  void onCreditCardModelChange(CreditCardModel creditCardModel) {
    final String date = creditCardModel.expiryDate;
    final List<String> dates = date.split('/');

    setState(() {
      _card.number = creditCardModel.cardNumber;

      if (dates.length == 2) {
        _card.expiryMonth = dates[0];
        _card.expiryYear = dates[1];
      }
      _card.name = creditCardModel.cardHolderName;
      _card.cvv = creditCardModel.cvvCode;
      isCvvFocused = creditCardModel.isCvvFocused;
    });
  }
}