React集成Stripe Checkout报错：缺少必填`key`参数

• 验证环境变量加载状态
  确保.env文件放在项目根目录，修改后重启开发服务器（React环境变量变更需重启才会生效）。在使用Stripe的组件中添加console.log(process.env.REACT_APP_STRIPE)，查看控制台是否能正确输出你的发布密钥。如果显示undefined，检查：

  • .env文件名是否正确（不能带后缀，比如.env.local.txt是无效的）
  • 变量名是否严格以REACT_APP_开头（React仅识别以此前缀命名的环境变量）

• 确认组件key属性传递正确
  检查react-stripe-checkout的StripeCheckout组件是否正确传入key参数，示例代码如下：

  import StripeCheckout from 'react-stripe-checkout';
  
  const PaymentButton = () => {
    const handlePaymentToken = (token) => {
      // 后续支付逻辑处理
    };
  
    return (
      <StripeCheckout
        token={handlePaymentToken}
        amount={1000} // 金额单位为分
        currency="CNY"
        key={process.env.REACT_APP_STRIPE} // 必须准确传递该属性
      >
        发起支付
      </StripeCheckout>
    );
  };
  

  注意组件仅识别key作为密钥参数名，不要误写为publishableKey或其他拼写错误的名称。

• 检查密钥格式与配置正确性
  Stripe发布密钥格式为pk_test_xxxxxx（测试环境）或pk_live_xxxxxx（生产环境），确认.env中的配置无多余引号或空格，推荐直接写为REACT_APP_STRIPE=pk_test_xxxxxx，避免因引号嵌套导致读取异常。

• 排查组件封装导致的参数丢失
  若你将StripeCheckout封装为自定义组件，需确保在props透传时未遗漏key参数，示例如下：

  const CustomStripeWrapper = ({ stripeKey, ...otherProps }) => {
    return <StripeCheckout key={stripeKey} {...otherProps} />;
  };
  

内容的提问来源于stack exchange，提问作者Ashish Pradhan