Stripe 是一个非常流行的第三方支付处理平台，很多电商和在线服务公司都在使用它进行支付。如果你是一个前端开发者，你可能需要将 Stripe 集成到你的 Next.js 应用中以处理支付。
在本文中，我们将介绍如何在 Next.js 应用中集成 Stripe。我们会深入讨论 Stripe 的概念，介绍如何设置 Stripe 帐户以及如何编写代码并测试 Stripe 模块。
Stripe 概念
在开始学习如何集成 Stripe 之前，我们需要了解一些 Stripe 的主要概念。
Stripe 帐户
Stripe 帐户是一个托管商户帐户，可以被用来接收支付。Stripe 帐户由两种类型：标准帐户和自定义帐户。
标准帐户：默认情况下，如果你没有进行任何设置，你将拥有一个标准帐户。标准帐户有一些限制，比如不能自定义付款流程等。
自定义帐户：自定义帐户是指你有完全控制权的帐户。你可以自定义付款流程，设计自己的支付页面等等。
Stripe API
Stripe API 是一个用于与 Stripe 服务器通信的 RESTful API。你可以通过这个 API 来创建付款、退款、接收付款等等操作。
Stripe Checkout
Stripe Checkout 是 Stripe 提供的一个方便的付款界面。通过 Stripe Checkout，你可以获取客户的付款信息并进行支付处理。
Stripe Elements
Stripe Elements 是一个可自定义的界面组件库，它可以快速实现 Stripe 的付款表单和支付按钮等 UI。
集成 Stripe 过程
接下来，我们将详细介绍如何在 Next.js 应用中集成 Stripe。本教程假设你已经创建了一个 Next.js 应用。
第一步：创建 Stripe 帐户并获取 API 密钥
要集成 Stripe，请首先访问官方网站并创建一个 Stripe 帐户。在你的 Stripe 帐户中，你需要找到你的 API 密钥，它将用于访问 Stripe API。
要获取你的 API 密钥，请转到 "开发人员" 菜单下的 "API 密钥" 标签。在这个页面中，你会看到几个密钥选项。对于本教程，我们将使用 "Test secret key"，因为我们只是在开发模式下使用 Stripe。你需要将此密钥复制并存储在一个安全的地方。
第二步：安装 Stripe
要在 Next.js 应用中使用 Stripe，你需要安装 Stripe 库。使用以下命令在你的项目中安装 Stripe：
npm install stripe
或者，如果你使用的是 Yarn，使用以下命令进行安装：
yarn add stripe
第三步：编写代码
现在，我们已经准备好编写代码来集成 Stripe。首先，我们需要将 Stripe 的 JavaScript 库添加到我们的项目中。将以下代码添加到你的 _document.js 文件中：
-- -------------------- ---- -------
------ --------- - ----- ----- ----- ---------- - ---- ---------------
----- ---------- ------- -------- -
-------- -
------ -
------
------
------- -----------------------------------------
-------
------
----- --
----------- --
-------
-------
-
-
-
------ ------- ----------这段代码添加了 Stripe 的 JavaScript 库到你的应用中，让你可以使用 Stripe 的客户端库。
接下来，我们需要编写一个服务端函数来处理 Stripe 支付。将以下代码添加到你的 api/stripe.js 文件中：
-- -------------------- ---- -------
------ ------ ---- --------
----- ------ - --- ------------------------------------- -
----------- -------------
--
------ ------- ----- -------- ------------ ---- -
----- - ------ - - --------
--- -
----- ------------- - ----- ------------------------------
-------
--------- ------
--
-------------------------------------------------
- ----- ----- -
----------------
------------------------ ----- ----------
-
-这个服务端函数使用了 Stripe Node.js 库来创建一个付款 Intent。在这个例子中，我们只是创建了一个包括金额的付款 Intent，这意味着此时我们还没有显示一个支付表单或与用户进行交互。我们将在后面的步骤中介绍如何实现这些功能。
最后，我们需要编写一些客户端代码来处理 Stripe 的付款表单。在下面的代码中，我们使用 Stripe Elements 提供的输入框和按钮来创建一个 Stripe 下单表单：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ ----- ---- -------
------ - ------------ ------------ --------- - ---- -------------------------
------ ------- -------- -------------- -
----- ------ - -----------
----- -------- - -------------
----- ------- --------- - --------------
----- ------------ -------------- - ---------------
----- ----------- ------------- - ---------------
----- -------------- ---------------- - ----------
----- -------- ---------- - -----------
----- ------------ - ----- ------- -- -
----------------------
-------------------
----- ------- - ----- --------------------------------------- -
--------------- -
----- ---------------------------------
-
--
-- --------------- -
----------------- ------- --------------------------
--------------------
- ---- -
--------------
--------------------
------------------
-
-
----- ------------ - ------- -- -
-----------------------------
-
----- ------------------------- - ----- -- -- -
----- -------- - ----- ------------------------- - ------ --
------------------------------
-
------ -
-----
----- ------------------------
-------
------ -- ------
------ ------------- ----------------------- -------------- --
--------
--- --
------------ --
------- -------------------- -- ---------- --------------
----------- - --------------- - ------
---------
-------
------- -------------------------------------------- ------- ---------------
------ -- -------------------
---------- -- ------------ ------------------
------
-
-这段代码使用了 useStripe() 和 useElements() 钩子来从 Stripe 全局上下文中获取相应的组件。此外，我们还在代码中使用了 useState() 钩子来存储各种状态，例如支付是否成功等等。
代码中 handleSubmit() 函数用于向 Stripe 服务器发出付款请求，而 handleChange() 函数用于设置 amount 变量的值。
最后，我们在 handleCreatePaymentIntent() 函数中调用了 /api/stripe 服务端函数来生成一个表示付款 Intent 的 client secret。在生成这个 client secret 后，我们就可以将它传递到 stripe.confirmCardPayment() 方法中来完成付款。
第四步：测试 Stripe 模块
现在，我们已经完成了 Stripe 的所有设置和代码编写。接下来，我们需要测试我们的应用是否能够正常工作。
首先，要确保你的 .env.local 文件包含你的 Stripe 私钥，如下所示：
STRIPE_SECRET_KEY=your_secret_key_here
然后，你可以在你的 Next.js 项目中运行以下命令来启动开发服务器：
npm run dev
在浏览器中打开 http://localhost:3000，你应该可以看到一个用于付款的表单。输入一个金额并点击 "Pay" 按钮，你应该会看到一个模拟的成功支付消息。
结论
在本篇文章中，我们深入介绍了如何在 Next.js 应用中集成 Stripe。我们介绍了 Stripe 的主要概念，如 Stripe 帐户、API、Checkout 和 Elements，然后通过一个完整的示例代码向你展示了如何使用 Stripe 的不同组件来收取付款。
如果你想了解更多关于 Stripe 的知识，可以查阅官方文档，其中提供了更详细的信息：https://stripe.com/docs
祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67484c2193696b0268ef5472