React/Next.js集成Stripe支付遇secret_key_required错误求助

在React/Next.js应用中集成Stripe支付时，选择银行卡支付方式发起请求后收到400错误：

• 请求地址：http://localhost:9000/store/carts/cart_01HEREDSXETVVFCMGGT2W5T2KJ/payment-session
• 请求方法：POST
• 状态码：400 Bad Request

错误详情：

code: "secret_key_required"
message: "An error occurred in initiatePayment when creating a Stripe customer:\r\nundefined\r\n"
type: "invalid_data"

目前仅在前端使用了Stripe公钥，疑问：该错误是因为POST请求API未传入Secret Key，还是创建Customer初始化支付时缺少Secret Key？

补充前端代码：

import {
  CardCvcElement,
  CardExpiryElement,
  CardNumberElement,
} from "@stripe/react-stripe-js"
import {
  StripeCardCvcElementOptions,
  StripeCardExpiryElementOptions,
  StripeCardNumberElementOptions,
} from "@stripe/stripe-js"
import React, { useMemo } from "react"

const PaymentStripe: React.FC = () => {
  const useOptions:
    | StripeCardNumberElementOptions
    | StripeCardExpiryElementOptions
    | StripeCardCvcElementOptions = useMemo(() => {
    return {
      style: {
        base: {
          fontFamily: "Inter, sans-serif",
          color: "#424270",
          padding: "10px 12px",
          "::placeholder": {
            color: "#CFD7E0",
          },
        },
      },
    }
  }, [])

  return (
    <div>
      <div className="flex flex-col relative w-full pb-6">
        <CardNumber options={useOptions as StripeCardNumberElementOptions} />
        <div className="flex items-center mt-12 relative gap-x-4">
          <CardExpiry options={useOptions as StripeCardExpiryElementOptions} />
          <CardCVC options={useOptions as StripeCardCvcElementOptions} />
        </div>
      </div>
    </div>
  )
}

const CardNumber = ({
  options,
}: {
  options: StripeCardNumberElementOptions
}) => {
  return (
    <div className="border-b border-gray-200 py-2 relative">
      <span className="absolute -top-6 text-gray-700 text-base-regular">
        Card number
      </span>
      <CardNumberElement options={options} />
    </div>
  )
}

const CardExpiry = ({
  options,
}: {
  options: StripeCardExpiryElementOptions
}) => {
  return (
    <div className="border-b border-gray-200 w-full py-2 relative">
      <span className="absolute -top-6 text-gray-700 text-base-regular">
        Expiration date
      </span>
      <CardExpiryElement options={options} />
    </div>
  )
}

const CardCVC = ({ options }: { options: StripeCardCvcElementOptions }) => {
  return (
    <div className="border-b border-gray-200 w-full py-2 relative">
      <span className="absolute -top-6 text-gray-700 text-base-regular">
        CVC
      </span>
      <CardCvcElement options={{ ...options, placeholder: "123" }} />
    </div>
  )
}

export default PaymentStripe

这个错误明确指向后端创建Stripe Customer时未配置或传入Stripe Secret Key，核心原因和修复点如下：

1. Stripe公钥仅用于前端初始化卡片输入组件（你代码中的Card系列Element），而创建Customer、生成Payment Session这类敏感操作必须在后端完成，且必须使用Stripe Secret Key。
2. 错误信息里的secret_key_required和创建Customer时的undefined提示，说明后端代码在调用Stripe API时，要么没有初始化Stripe客户端并传入Secret Key，要么初始化时密钥配置为空。

具体修复步骤：

• 检查后端处理/store/carts/[cartId]/payment-session的POST接口代码：
  • 确保已导入Stripe SDK并使用Secret Key初始化客户端，以Node.js为例：

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

  • 确保创建Customer的逻辑中，正确使用了初始化后的Stripe客户端，没有遗漏密钥配置。
• 注意：Secret Key绝对不能暴露在前端代码中，必须存储在后端环境变量里，通过环境变量读取使用。

内容的提问来源于stack exchange，提问作者Sylwester Zabielski