Stripe 支付是一种流行的在线支付解决方案，它可以为网站和应用程序提供安全、简单和快速的支付处理。在本文中，我们将介绍如何在 Next.js 中集成 Stripe 支付。
步骤一：创建 Stripe 帐户并获取 API 密钥
在使用 Stripe 支付之前，您需要先创建一个 Stripe 帐户。注册后，您将获得一个 API 密钥，它是与 Stripe 通信的必要凭据。
在 Stripe 控制台中创建一个新帐户并获取 API 密钥的步骤如下：
- 前往 Stripe 官网（https://stripe.com/）并注册一个新帐户。
- 登录 Stripe 控制台并转到“开发者”选项卡。
- 单击“API 密钥”下的“新建密钥”按钮。
- 复制您的 API 密钥并保存它，您将在后面使用它。
步骤二：安装 Stripe 库和依赖项
在 Next.js 中使用 Stripe 支付，您需要安装 Stripe 库和相关依赖项。您可以使用以下命令来安装它们：
npm install stripe @stripe/react-stripe-js @stripe/stripe-js
步骤三：创建 Stripe Checkout 组件
在 Next.js 中，您可以使用 Stripe Checkout 组件来呈现 Stripe 支付窗口。您可以使用以下代码创建 Stripe Checkout 组件：
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------ - -------- - ---- --------------------------
------ ------------ ---- -----------------------------
----- ------------- - ------------------------------------------------------
------ ------- -------- ---------- -
------ -
--------- -----------------------
------------- --
-----------
--
-在上面的代码中，我们使用 loadStripe 方法加载 Stripe 公钥，并将其传递给 Elements 组件。然后，我们将 CheckoutForm 组件作为子组件传递给 Elements 组件。我们将在下一步中创建 CheckoutForm 组件。
步骤四：创建 CheckoutForm 组件
在 CheckoutForm 组件中，我们将使用 Stripe Elements 和 Stripe API 来处理支付。您可以使用以下代码创建 CheckoutForm 组件：
-- -------------------- ---- -------
------ - ------------ ---------- ----------- - ---- --------------------------
------ ------- -------- -------------- -
----- ------ - ------------
----- -------- - --------------
----- ------------ - ----- ------- -- -
-----------------------
----- - ------ ------------- - - ----- ----------------------------
----- -------
----- ---------------------------------
---
-- -------- -
------------------- -- ----- ------------------
-
--
------ -
----- ------------------------
------------ --
------- -------------------------
-------
--
-在上面的代码中，我们使用 useStripe 和 useElements 钩子从 Elements 组件中获取 Stripe 实例和元素实例。我们还定义了一个名为 handleSubmit 的函数，它将在用户提交支付表单时触发。
在 handleSubmit 函数中，我们使用 stripe.createPaymentMethod 方法创建一个新的支付方法，并将其传递给 Stripe API。如果没有错误，我们将在控制台中记录 Stripe 付款 ID。
在 CheckoutForm 组件的返回值中，我们呈现一个包含 CardElement 和一个支付按钮的表单。CardElement 是 Stripe Elements 提供的一个 React 组件，它允许用户输入其信用卡信息。
步骤五：测试 Stripe 支付
现在，您已经完成了在 Next.js 中集成 Stripe 支付的所有步骤。您可以使用以下命令启动 Next.js 应用程序：
npm run dev
然后，您可以访问 http://localhost:3000/checkout 页面并测试 Stripe 支付。
结论
在本文中，我们介绍了如何在 Next.js 中集成 Stripe 支付。我们学习了如何创建 Stripe Checkout 组件和 Stripe Elements，以及如何使用 Stripe API 处理支付。这将帮助您为您的网站或应用程序添加强大的在线支付功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676afdf978388e33bb1eff30