Flutter支付集成插件stripe_native_card_field的使用

免责声明

这不是由Stripe官方维护的包，但由于使用Flutter中的HTML Stripe元素不方便，所以创建了这个包。

功能特性

• ⚡ 极速加载（和Flutter其他组件一样快）
• 🧹 更简洁易用（依赖更少，比官方的Stripe Elements更简单）
• 🛡 支持所有Flutter目标平台（原生Flutter，依赖极小）
• ☑ 无缝用户体验（尽可能接近Stripe的质量）
• 💳 内置Stripe集成
• ☯ 提供额外的能量（开玩笑…）

为什么选择StripeNativeCardField？

• 更少的依赖：不再依赖Flutter Webview
• 可定制化：整个字段可以继承原生Flutter样式，例如BoxDecoration()
• 原生实现：编译和加载如同应用其他部分，不像嵌入式HTML
• 自动验证：无需在代码中添加inputFormatters或RegExp

卡片数据可以通过onValidCardDetails回调获取，或者让元素在字段填写完毕后自动创建一个Stripe卡令牌，并通过onTokenReceived回调返回该令牌。

卡提供商检测

支持的卡提供商文档

可定制的样式

更多定制化样式文档

流畅的用户体验

模仿Stripe HTML元素的行为，自动聚焦/过渡文本字段、退格键聚焦到最后一个字段、自动验证用户输入等。

开始使用

1. 安装插件：

   flutter pub add stripe_native_card_field
   

2. 在Dart文件中引入插件：

   import 'package:stripe_native_card_field/stripe_native_card_field.dart';
   

获取原始卡片数据

CardTextField(
  width: 500,
  onValidCardDetails: (details) {
    // 保存卡片信息以供后续调用Stripe或其他服务
    setState(() => _cardDetails = details);
  },
);

获取Stripe令牌

CardTextField(
  width: 500,
  stripePublishableKey: 'pk_test_abc123', // 替换为您的Stripe公钥
  onStripeResponse: (Map<String, dynamic> data) {
    // 保存Stripe令牌以发送到后端
    setState(() => _tokenData = data);
  },
);

如果您希望对何时调用Stripe有更精细的控制，可以创建一个GlobalKey并访问CardTextFieldState，然后自己调用getStripeResponse()函数。详情请参考提供的示例。如果选择这种方法，请不要提供onStripeResponse回调，否则会导致两次调用Stripe！

示例代码

以下是完整的示例代码，展示了如何在Flutter项目中使用stripe_native_card_field插件：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:stripe_native_card_field/card_details.dart';
import 'package:stripe_native_card_field/stripe_native_card_field.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Native Stripe Field Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CardDetailsValidState? state;
  String? errorText;

  // 创建全局key，允许我们在build方法中调用CardTextFieldState中的`getStripeResponse()`
  final _key = GlobalKey<CardTextFieldState>();

  @override
  Widget build(BuildContext context) {
    final cardField = CardTextField(
      key: _key,
      loadingWidgetLocation: LoadingLocation.above,
      stripePublishableKey: 'pk_test_abc123testmykey', // 替换为您的Stripe公钥
      width: 600,
      onValidCardDetails: (details) {
        if (kDebugMode) {
          print(details);
        }
      },
      overrideValidState: state,
      errorText: errorText,
    );

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                'Enter your card details below:',
              ),
            ),
            cardField,
            ElevatedButton(
              child: const Text('Set manual error'),
              onPressed: () => setState(() {
                errorText = 'There is a problem';
                state = CardDetailsValidState.invalidCard;
              }),
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              child: const Text('Get Stripe token'),
              onPressed: () async {
                // 使用全局key获取Stripe数据，而不是使用widget中的`onStripeResponse`回调
                final tok = await _key.currentState?.getStripeResponse();
                if (kDebugMode) print(tok);
              },
            )
          ],
        ),
      ),
    );
  }
}

额外信息

• 仓库地址：https://git.fosscat.com/n8r/stripe_native_card_field
• 如有任何问题或PR，请联系：n8r@fosscat.com

希望这些信息能够帮助您顺利集成Stripe支付功能！如果有任何疑问，欢迎随时提问。