Flutter支付结算插件checkout_sdk_flutter的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter支付结算插件checkout_sdk_flutter的使用

安装

pubspec.yaml 文件中添加 checkout_sdk_flutter

dependencies:
  ...
  checkout_sdk_flutter: <version>

使用

首先,如果你还没有账户,可以在这里创建一个账户:创建测试账户。一旦你有了账户,你应该能够访问你的公钥。

在代码中导入插件:

import 'package:checkout_sdk_flutter/checkout_sdk_flutter.dart';

初始化SDK并传入公钥:

var cko = new Checkout(publicKey: "your_key");

注意:SDK会根据提供的公钥自动确定使用的环境。

Tokenize一张卡

final request = CardTokenizationRequest(
    number: "4242424242424242", // 卡号
    expiryMonth: 11, // 到期月份
    expiryYear: 2029, // 到期年份
    cvv: "100", // CVV码
    name: "John Smith"); // 持卡人姓名
var res = await cko.tokenizeCard(request);

Tokenize一个Apple Pay payload

final request = ApplePayTokenizationRequest(
tokenData: AppleTokenData(
    version: 'EC_v1', // 版本
    data: 'XXXXXX', // 数据
    signature: 'XXXXXX', // 签名
    header: AppleHeader(
        ephemeralPublicKey: 'XXXXXX', // 临时公钥
        publicKeyHash: 'XXXXXX', // 公钥哈希
        transactionId: 'XXXXXX')), // 交易ID
);

var res = await cko.tokenizeApplePay(request);

Tokenize一个Google Pay payload

final request = GooglePayTokenizationRequest(
tokenData: GoogleTokenData(
    signature: 'XXX', // 签名
    protocolVersion: 'XXX', // 协议版本
    signedMessage: "XXX"), // 签名消息
);

var res = await cko.tokenizeGooglePay(request);

处理异常

try {
  // SDK操作
} on UnauthorizedError catch (exception) {
  // 处理未经授权错误
} on InvalidDataError catch (exception) {
  // 处理无效数据错误
} catch (error) {
  // 处理其他异常
}

完整示例代码

以下是一个完整的示例代码,展示了如何使用 checkout_sdk_flutter 插件进行支付结算:

import 'dart:developer';

import 'package:credit_card_input_form/constants/constanst.dart';
import 'package:flutter/material.dart';

import 'package:credit_card_input_form/credit_card_input_form.dart';
import 'package:checkout_sdk_flutter/checkout_sdk_flutter.dart';
import 'package:alert/alert.dart';

var cko = new Checkout(publicKey: "pk_test_4296fd52-efba-4a38-b6ce-cf0d93639d8a");

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            child: Stack(children: [
              CreditCardInputForm(
                showResetButton: true,
                onStateChange: (currentState, cardInfo) async {
                  if (currentState == InputState.DONE) {
                    // 使用Checkout.com SDK
                    try {
                      final request = CardTokenizationRequest(
                          number: cardInfo.cardNumber.replaceAll(' ', ''), // 去除空格
                          expiryMonth: int.parse(cardInfo.validate.substring(0, 2)), // 获取到期月份
                          expiryYear: 2000 + int.parse(cardInfo.validate.substring(3, 5)), // 获取到期年份
                          cvv: cardInfo.cvv, // CVV码
                          name: cardInfo.name); // 持卡人姓名
                      var res = await cko.tokenizeCard(request);
                      Alert(message: res.token).show(); // 显示token
                    } on UnauthorizedError catch (exception) {
                      print('UnauthorizedError data:');
                    } on InvalidDataError catch (exception) {
                      print('InvalidDataError data');
                    } catch (error) {
                      print(error);
                    }
                  }
                },
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter支付结算插件checkout_sdk_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter支付结算插件checkout_sdk_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用checkout_sdk_flutter插件的示例代码。这个插件通常用于集成支付结算功能。假设你已经有一个Flutter项目,并且已经添加了checkout_sdk_flutter依赖到你的pubspec.yaml文件中。

首先,确保你的pubspec.yaml文件中包含以下依赖项:

dependencies:
  flutter:
    sdk: flutter
  checkout_sdk_flutter: ^最新版本号  # 请替换为实际的最新版本号

然后,运行flutter pub get来安装依赖。

接下来,我们将展示如何在Flutter应用中初始化并使用checkout_sdk_flutter插件。

1. 初始化插件

在你的主文件(通常是main.dart)中,你需要导入插件并进行初始化。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Checkout SDK Flutter Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _initiatePayment,
            child: Text('Initiate Payment'),
          ),
        ),
      ),
    );
  }

  Future<void> _initiatePayment() async {
    // 初始化Checkout SDK
    CheckoutSdkFlutter checkoutSdk = CheckoutSdkFlutter();

    // 配置支付参数(这里以示例数据为准,实际使用时需替换为真实数据)
    Map<String, dynamic> paymentConfig = {
      'publicKey': '你的公钥',
      'amount': 100.0, // 金额
      'currency': 'USD', // 货币
      'reference': 'order_reference_${DateTime.now().millisecondsSinceEpoch}', // 订单参考号
      'successUrl': 'https://yourwebsite.com/success', // 支付成功后的跳转URL
      'cancelUrl': 'https://yourwebsite.com/cancel', // 支付取消后的跳转URL
      // 其他必要的配置参数...
    };

    try {
      // 发起支付请求
      await checkoutSdk.startPayment(paymentConfig);
    } catch (e) {
      // 处理错误
      print('Payment initialization failed: $e');
    }
  }
}

2. 处理支付回调

在真实的应用场景中,支付成功后,用户可能会被重定向回你的应用,并附带一些支付结果参数。你可能需要处理这些回调并更新你的应用状态。

由于checkout_sdk_flutter插件的具体回调处理机制可能会根据SDK的版本和具体实现有所不同,这里假设SDK提供了某种方式来处理回调(例如通过URL Scheme或Deep Linking)。你可能需要在你的AndroidManifest.xmlInfo.plist文件中进行相应的配置,以便应用能够正确接收和处理这些回调。

3. AndroidManifest.xml 配置示例

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="yourappscheme" android:host="payment" />
</intent-filter>

4. Info.plist 配置示例

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourappscheme</string>
        </array>
    </dict>
</array>

然后,在你的Flutter应用中,你可能需要监听这些URL Scheme的变化,并据此更新应用状态。这通常涉及到使用Flutter的插件如url_launcheruni_links来处理Deep Linking。

请注意,以上代码仅作为示例,实际使用时需根据checkout_sdk_flutter插件的官方文档和API进行调整。同时,确保遵循所有安全最佳实践,特别是处理支付敏感信息时。

回到顶部