Flutter支付结账插件flutter_checkout_payment的使用

概述

flutter_checkout_payment 是一个用于在线支付的Flutter插件，实现了Checkout.com的原生SDK。以下是该插件的基本用法和示例代码。

安装步骤

在 pubspec.yaml 文件中添加依赖

dependencies:
  flutter_checkout_payment: ^1.4.0

Android 配置

无需额外配置。

iOS 配置

确保在 Podfile 中设置平台版本为 iOS 10 或更高。

platform :ios, '10.0'

使用方法

导入包

import 'package:flutter_checkout_payment/flutter_checkout_payment.dart';

初始化API

使用你的公共密钥初始化API。密钥可以在Checkout仪表板中找到。

await FlutterCheckoutPayment.init(key: "YOUR_PUBLIC_KEY");

生产环境需要设置环境为Live：

await FlutterCheckoutPayment.init(key: "YOUR_PUBLIC_KEY", environment: Environment.LIVE);

生成Token

生成Token用于支付过程。

CardTokenisationResponse response = await FlutterCheckoutPayment.generateToken(
  number: "4242424242424242",
  name: "name",
  expiryMonth: "05",
  expiryYear: "21",
  cvv: "100"
);
print(response.token);

示例Demo

以下是一个完整的示例应用，展示如何使用 flutter_checkout_payment 插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _isInit = "false";
  String cardNumber = '';
  String expiryDate = '';
  String cardNameHolder = '';
  String cvv = '';

  @override
  void initState() {
    super.initState();
    initPaymentSDK();
  }

  Future<void> initPaymentSDK() async {
    try {
      bool? isSuccess = await FlutterCheckoutPayment.init(key: "YOUR_PUBLIC_KEY");
      if (mounted) setState(() => _isInit = "true");
    } on PlatformException {
      if (mounted) setState(() => _isInit = "error");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Checkout Payment Plugin'),
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              SizedBox(height: 10),
              Text("Checkout Init: $_isInit", style: TextStyle(fontSize: 18)),
              // Add your Credit Card UI here
              Expanded(
                child: SingleChildScrollView(
                  child: Container(
                    padding: EdgeInsets.all(16),
                    child: Column(
                      children: [
                        TextField(
                          decoration: InputDecoration(labelText: 'Card Number'),
                          onChanged: (value) => cardNumber = value,
                        ),
                        TextField(
                          decoration: InputDecoration(labelText: 'Expiry Date'),
                          onChanged: (value) => expiryDate = value,
                        ),
                        TextField(
                          decoration: InputDecoration(labelText: 'Card Holder Name'),
                          onChanged: (value) => cardNameHolder = value,
                        ),
                        TextField(
                          decoration: InputDecoration(labelText: 'CVV'),
                          onChanged: (value) => cvv = value,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: _generateToken,
                child: Text('Generate Token'),
              ),
            ],
          ),
        ));
  }

  Future<void> _generateToken() async {
    try {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return WillPopScope(
              onWillPop: () => Future<bool>.value(false),
              child: AlertDialog(
                title: Text("Loading..."),
                content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[CircularProgressIndicator()]),
              ));
        },
      );

      String number = cardNumber.replaceAll(" ", "");
      String expiryMonth = expiryDate.substring(0, 2);
      String expiryYear = expiryDate.substring(3);

      CardTokenisationResponse? response = await FlutterCheckoutPayment.generateToken(
          number: number,
          name: cardNameHolder,
          expiryMonth: expiryMonth,
          expiryYear: expiryYear,
          cvv: cvv);

      Navigator.pop(context);

      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Token"),
            content: Text("${response?.token ?? 'No token found'}"),
            actions: <Widget>[
              TextButton(
                child: Text("Close"),
                onPressed: () => Navigator.pop(context),
              )
            ],
          );
        },
      );
    } catch (ex) {
      Navigator.pop(context);

      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Error"),
            content: Text("${ex.toString()}"),
            actions: <Widget>[
              TextButton(
                child: Text("Close"),
                onPressed: () => Navigator.pop(context),
              )
            ],
          );
        },
      );
    }
  }
}

公共静态方法总结

以上是 flutter_checkout_payment 插件的基本使用方法及示例代码，希望对您有所帮助！