Stripe支付集成问题：无法显示支付卡片且报StripeConfigException

核心问题分析 #

1. 客户端直接使用Stripe Secret Key违规且不安全：你的代码直接在Flutter客户端调用Stripe的Payment Intents API并暴露Secret Key，这会导致账户被盗用风险，且Stripe禁止在客户端使用Secret Key。
2. Payment Intent未关联Customer，无Ephemeral Key生成：直接创建Payment Intent时，Stripe不会自动生成Customer和Ephemeral Key，因此jsonresponse["customer"]和jsonresponse["ephemeralKey"]必然为null，而Payment Sheet初始化需要合法参数，最终引发StripeConfigException。
3. 前端代码存在语法错误：按钮点击事件里的intpayment(email: "email,amount: 50.0);未闭合字符串引号，会导致函数调用失败。

修复步骤 #

1. 修复前端语法错误

将按钮点击代码修正为：

Center(
  child: ElevatedButton(
    onPressed: () {
      intpayment(email: "your-actual-email@example.com", amount: 50.0);
    },
    child: const Text("Pay 50\$"), // 同步修正文本与金额不匹配的问题
  ),
),

2. 搭建后端代理Stripe请求（必须步骤）

所有Stripe API请求必须通过后端代理，以下是Node.js示例：

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

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

// 创建Customer对应的Ephemeral Key
app.post('/create-ephemeral-key', async (req, res) => {
  const { customerId } = req.body;
  const key = await stripe.ephemeralKeys.create(
    { customer: customerId },
    { apiVersion: '2024-06-20' } // 使用你当前的Stripe API版本
  );
  res.json({ ephemeralKey: key.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({
    paymentIntentClientSecret: paymentIntent.client_secret,
  });
});

3. 修正前端支付函数

改为调用自己的后端接口，获取合法参数后初始化Payment Sheet：

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 paymentIntentClientSecret = paymentIntentData['paymentIntentClientSecret'];

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

    // 5. 显示支付卡片
    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);
    }
  }
}

补充说明 #

• 若无需保存支付方式，可简化流程：不用创建Customer和Ephemeral Key，初始化Payment Sheet时仅传paymentIntentClientSecret和merchantDisplayName即可，但仍需通过后端创建Payment Intent。
• 可查看Stripe Dashboard的日志和Webhooks，检查Payment Intent的详细状态，排查域名白名单、API版本兼容等潜在问题。

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