我的 Stripe React 组件未加载

Question

我的目的是使用它们的组件将我的 React 应用程序与 Stripe 连接但是我遇到的问题是我的 React 组件没有加载 github link to project 你可以找到前端的相关文件 frontend/src/screens/checkout/paymentWrap 这个文件我将我的表单包装在条带提供的 Element 组件中你可以看到所有事实上我有带有所有凭据的推送代码我得到的错误是

v3:1 Uncaught (in promise) IntegrationError: Please call Stripe() with your publishable key. You used an empty string.
    at d (v3:1:52111)
    at new e (v3:1:271693)
    at ko (v3:1:303926)
    at initStripe (stripe.esm.js:101:1)
    at stripe.esm.js:125:1

其实我是按照他们的文档做的docs 但是他们没有在哪里称这个条纹所以我也没有我很沮丧因为三天我在这里不能前进

Answer 1

const [stripeApiKey, setStripeApiKey] = useState("");

我认为文件顶部的这一行是您运行进入该问题的原因。您的代码看起来不错，但您忘记了 React 生命周期是如何工作的。

WrapPayment.jsx 组件的初始渲染将尝试调用 loadStripe("") 因为 stripeApiKey 的初始状态是 ""

我建议像这样创建一个加载状态变量：

const [loading, setLoading] = useState(true);

在此处添加 setLoading(true); 调用：

async function getStripeApiKey() {
    const { data } = await axios.get("/api/v1/stripeapikey");
    setStripeApiKey(data.stripeApiKey);
    setLoading(false);
}

然后像这样渲染：

if(loading) {
    return "Some Loader Component here"
} else {
    return (
      <>
          {/* <Payment/> */}
          <Elements stripe={loadStripe(stripeApiKey)}
              options={options}
          >
              <Payment/>
          </Elements>
  
      </>
    )
}

我的 Stripe React 组件未加载

My Stripe react components are not loading

reactjs

stripe-payments