loadStripe 不断给我 {type: "invalid_request_error", message: "Invalid API Key provided: undefined"} 错误答案

【问题标题】：loadStripe keeps giving me {type: "invalid_request_error", message: "Invalid API Key provided: undefined"} errorloadStripe 不断给我 {type: "invalid_request_error", message: "Invalid API Key provided: undefined"} 错误
【发布时间】：2021-09-16 12:03:14
【问题描述】：

import { loadStripe } from '@stripe/stripe-js';

const apiKey = `${process.env.REACT_STRIPE_PUBLIC_KEY}`;
const stripePromise = loadStripe(apiKey);

promise 实现后，stripePromise 对象中的_apiKey 未定义。

几天来一直卡在这个错误上。谁愿意帮忙。

非常感谢，非常感谢

【问题讨论】：

您是否尝试通过控制台记录密钥以查看它是否已定义？好像是未定义的，能否请您展示您如何设置 .env，而不显示您的私钥？
环境变量是如何存储的？作为实际环境变量还是在.env 文件中？启动应用程序时是否设置了环境变量？正如大卫所说，你可能想console.log它。
我刚刚尝试控制台记录密钥，令我惊讶的是它未定义。这怎么可能？我在我的应用程序中设置了其他键，并且控制台记录它们会给我正确的响应。可能是什么问题？在我的 .env 文件中，我写了（REACT_STRIPE_PUBLIC_KEY = pk_test_.....）

标签： javascript node.js reactjs stripe-payments

【解决方案1】：

process.env.REACT_STRIPE_PUBLIC_KEY 很可能是空的。它也不太可能在客户端可用，因此可能需要在构建过程中呈现。

【讨论】：

控制台日志记录 apikey 实际上返回未定义。我不知道这是怎么回事，因为我只写前端代码，就像使用 commercejs 一样

【解决方案2】：

我终于想通了，伙计们。显然，react 中的 .env 变量必须以 REACT_APP_ 为前缀，然后是变量名。

将我的变量名从 REACT_STRIPE_PUBLIC_KEY 更改为 REACT_APP_STRIPE_PUBLIC_KEY 修复了该错误。非常感谢您的洞察力。

【讨论】：