loadStripe 一直給我 {type: "invalid_request_error", message: "Invalid API Key provided: undefined"} 錯誤

Question

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

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

promise 完成后， _apiKey中的stripePromise未定義。

幾天來一直停留在這個錯誤上。 任何人都願意提供幫助。

謝謝，非常感謝

Answer 1

process.env.REACT_STRIPE_PUBLIC_KEY很可能是空的。 它也不太可能在客戶端可用，因此可能需要在構建過程中呈現。

Answer 2

伙計們，我終於弄明白了。 顯然，反應中的 .env 變量必須以 REACT_APP_ 為前綴，然后是變量名。

將我的變量名從 REACT_STRIPE_PUBLIC_KEY 更改為 REACT_APP_STRIPE_PUBLIC_KEY 修復了這個錯誤。 非常感謝您的洞察力。

Answer 3

旁注，因為即使我的 env 變量命名正確，我也面臨同樣的問題......我試圖將變量提供給 loadStripe function，例如：

loadStripe(`${process.env.REACT_APP_STRIPE_PUBLIC_KEY}`);

它返回未定義所以我的解決方案是首先像上面寫的那樣將它放入組件定義之外的局部變量並將其提供給 function：

const apiKey = `${process.env.REACT_APP_STRIPE_PUBLIC_KEY}`;

比我稍后將此密鑰傳遞給 function ：

const stripe = await loadStripe(apiKey);

希望它對某人也有用。