如何在 Stripe Reactjs 中获取客户端密钥？为什么没有它就无法呈现付款表单？

Question

我遵循了基本的 React stripe 文档：\n https://stripe.com/docs/stripe-js/react

\n

所以这是我有问题的代码：

\n

索引.js

\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport App from \'./App\';\nimport {Elements} from \'@stripe/react-stripe-js\';\nimport {loadStripe} from \'@stripe/stripe-js\';\n\n// Make sure to call `loadStripe` outside of a component\xe2\x80\x99s render to avoid\n// recreating the `Stripe` object on every render.\nconst stripePromise = loadStripe(\'process.env.REACT_APP_STRIPE_PUBLIC_KEY\');\n\nfunction Index() {\n/*     const options = {\n        // passing the client secret obtained from the server\n        clientSecret: \'{{CLIENT_SECRET}}\',\n      }; */\n  return (\n    <Elements stripe={stripePromise} /* options={options} */>\n      <App/>\n      \n    </Elements>\n  );\n};\nReactDOM.render(<Index />, document.getElementById(\'root\'));\n

\n

结帐.tsx

\n

import {PaymentElement} from \'@stripe/react-stripe-js\';\nimport React from \'react\';\n\nexport default function CheckoutForm  () {\n  return (\n    <form>\n      <PaymentElement />\n      <button>Submit</button>\n    </form>\n  );\n};\n

\n

注释掉客户端机密选项的错误：

\n

Uncaught (in promise) IntegrationError: In order to create a payment element, you must pass a valid PaymentIntent or SetupIntent client secret when creating the Elements group.\n\n  e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})\n

\n

未注释选项的错误基本上是 CLIENT_SECRET 未定义或格式不正确。

\n

我在 Stripe 的视频教程中注意到，这个人没有这个选项就很好，但我无法重现它。\n https://www.youtube.com/watch?v=5y5WwF9s-ZI&t=356s

\n

一般来说，文档并没有说明如何以及何时获取 CLIENT_SECRET 变量。

\n

Answer 1

不确定如何从服务器获取客户端密钥，但您必须确保<Elements>在初始渲染时提供正确的客户端密钥（即不能为空）。

尝试添加clientSecret &&before ，就像官方文档中的这个示例<Elements>一样（选择“Web”和“React”以查看 React 中的示例代码）：

export default function App() {
  const [clientSecret, setClientSecret] = useState("");

  useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

  const appearance = {
    theme: 'stripe',
  };
  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App">
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  );
}

<Elements>如果 clientSecret 为假（即 false、未定义或 null），则不会安装此确保。

Answer 2

您需要删除 env 变量周围的引号，因为现在您只是传递一个字符串。它应该是 loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY); 假设你有这个环境变量可用于终端，它应该可以工作。

感谢@blessanm86