Stripe支付集成问题：卡片不显示及StripeConfigException报错

核心问题 #

你遇到的StripeConfigException和支付卡片不显示，根源是直接调用Stripe的Payment Intents API不会自动返回customer和ephemeralKey字段，这两个参数需要单独创建并关联到Payment Intent。另外，你把Stripe的Secret Key直接写在Flutter前端代码里，这是严重的安全风险（任何人都能拿到你的密钥操作你的Stripe账户）。

必须做的修正步骤 #

1. 把Stripe操作移到后端

绝对不能在前端使用Stripe Secret Key，所有创建Customer、Ephemeral Key、Payment Intent的操作都要放在你的后端服务中。以下是Node.js后端的示例代码：

const stripe = require('stripe')('你的Stripe Secret Key');

// 创建Customer
app.post('/create-customer', async (req, res) => {
  const customer = await stripe.customers.create({
    email: req.body.email,
  });
  res.json({ customerId: customer.id });
});

// 创建Ephemeral Key（必须关联Customer）
app.post('/create-ephemeral-key', async (req, res) => {
  const { customerId } = req.body;
  const ephemeralKey = await stripe.ephemeralKeys.create(
    { customer: customerId },
    { apiVersion: '2024-06-20' } // 替换为你当前使用的Stripe API版本
  );
  res.json({ ephemeralKey: ephemeralKey.secret });
});

// 创建关联Customer的Payment Intent
app.post('/create-payment-intent', async (req, res) => {
  const { amount, customerId } = req.body;
  const paymentIntent = await stripe.paymentIntents.create({
    amount: amount * 100, // Stripe金额单位为分，注意转换
    currency: 'usd',
    customer: customerId,
    automatic_payment_methods: { enabled: true },
  });
  res.json({ clientSecret: paymentIntent.client_secret });
});

2. 修改Flutter前端代码

替换原来的支付函数，改为调用你的后端接口获取所需参数：

Future<void> intpayment({required String email, required double amount}) async {
  try {
    // 1. 创建Customer
    final customerResponse = await http.post(
      Uri.parse("https://你的后端域名/create-customer"),
      body: {"email": email},
    );
    final customerData = jsonDecode(customerResponse.body);
    final customerId = customerData['customerId'];

    // 2. 创建Ephemeral Key
    final ephemeralKeyResponse = await http.post(
      Uri.parse("https://你的后端域名/create-ephemeral-key"),
      body: {"customerId": customerId},
    );
    final ephemeralKeyData = jsonDecode(ephemeralKeyResponse.body);
    final ephemeralKey = ephemeralKeyData['ephemeralKey'];

    // 3. 创建Payment Intent
    final paymentIntentResponse = await http.post(
      Uri.parse("https://你的后端域名/create-payment-intent"),
      body: {
        "amount": amount.toString(),
        "customerId": customerId,
      },
    );
    final paymentIntentData = jsonDecode(paymentIntentResponse.body);
    final clientSecret = paymentIntentData['clientSecret'];

    // 初始化Payment Sheet
    await Stripe.instance.initPaymentSheet(
      paymentSheetParameters: SetupPaymentSheetParameters(
        paymentIntentClientSecret: clientSecret,
        merchantDisplayName: 'Zohaib',
        customerId: customerId,
        customerEphemeralKeySecret: ephemeralKey,
      ),
    );

    // 展示支付卡片
    await Stripe.instance.presentPaymentSheet();
    Fluttertoast.showToast(msg: "支付成功");
  } catch (e) {
    if (e is StripeException) {
      Fluttertoast.showToast(msg: "Stripe错误: ${e.error.message}");
    } else {
      Fluttertoast.showToast(msg: "错误: $e", toastLength: Toast.LENGTH_SHORT);
    }
  }
}

3. 额外修正

• 按钮文字Pay20$和传入的amount:50.0不一致，建议统一
• 确保你在Flutter项目中正确配置了Stripe Publishable Key（在main.dart初始化时设置）：

void main() {
  Stripe.publishableKey = "你的Stripe Publishable Key";
  runApp(const MyApp());
}

为什么原来的方式不行？ #

Stripe的Payment Intents API默认不会创建Customer，只有当你在创建Payment Intent时指定customer参数，才会关联已有Customer。而Ephemeral Key是专门用于前端安全访问Customer数据的临时密钥，必须单独创建且关联Customer ID。

内容的提问来源于stack exchange，提问作者Muhammad Zohaib