如何使用flutter-stripe从银行卡信息中仅获取Token ID？

前置准备 #

1. 在pubspec.yaml中添加依赖：

dependencies:
  flutter_stripe: ^9.6.0

执行flutter pub get完成依赖安装。

2. 从Stripe后台API密钥页面获取你的Publishable Key，用于初始化Stripe服务。

完整代码实现 #

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 替换为你的Stripe Publishable Key
  Stripe.publishableKey = 'pk_test_your_publishable_key_here';
  await Stripe.instance.applySettings();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('生成Stripe Token')),
        body: const TokenGeneratorForm(),
      ),
    );
  }
}

class TokenGeneratorForm extends StatefulWidget {
  const TokenGeneratorForm({super.key});

  @override
  State<TokenGeneratorForm> createState() => _TokenGeneratorFormState();
}

class _TokenGeneratorFormState extends State<TokenGeneratorForm> {
  final _cardNumberController = TextEditingController(text: '4242424242424242'); // Stripe测试卡号
  final _expMonthController = TextEditingController(text: '12');
  final _expYearController = TextEditingController(text: '28');
  final _cvcController = TextEditingController(text: '123');
  String? _tokenResult;

  Future<void> _generateToken() async {
    try {
      // 构造银行卡参数对象
      final cardParams = CardParams(
        number: _cardNumberController.text.replaceAll(' ', ''),
        expMonth: int.parse(_expMonthController.text),
        expYear: int.parse(_expYearController.text),
        cvc: _cvcController.text,
      );

      // 调用Stripe接口生成Token
      final token = await Stripe.instance.createToken(cardParams);

      setState(() {
        _tokenResult = '生成成功: ${token.id}';
      });
    } catch (e) {
      setState(() {
        _tokenResult = '生成失败: ${e.toString()}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            controller: _cardNumberController,
            decoration: const InputDecoration(labelText: '银行卡号'),
            keyboardType: TextInputType.number,
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _expMonthController,
                  decoration: const InputDecoration(labelText: '到期月'),
                  keyboardType: TextInputType.number,
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: TextField(
                  controller: _expYearController,
                  decoration: const InputDecoration(labelText: '到期年'),
                  keyboardType: TextInputType.number,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          TextField(
            controller: _cvcController,
            decoration: const InputDecoration(labelText: 'CVC'),
            keyboardType: TextInputType.number,
            obscureText: true,
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: _generateToken,
            child: const Text('生成Token'),
          ),
          const SizedBox(height: 24),
          if (_tokenResult != null)
            Text(_tokenResult!, style: const TextStyle(fontSize: 16)),
        ],
      ),
    );
  }
}

关键注意事项 #

• 测试阶段可使用Stripe官方测试卡号（如示例中的4242424242424242），到期月/年需设置为未来日期，CVC填任意3位数字即可。
• 生产环境禁止直接在客户端处理银行卡敏感信息，建议通过你的后端服务器调用Stripe API生成Token，避免数据泄露风险。
• 确保你的Stripe账户已完成激活，且权限配置正确，否则可能出现Token生成失败的情况。

内容的提问来源于stack exchange，提问作者Kafiul Islam