前言
现今时代，线上交易已经成为了一种非常普遍的交易方式，而其中之一重要的环节即是付款功能。本文主要介绍如何使用 Next.js 和 Stripe 实现付款功能。在本文中，我们将学习如何使用 Stripe API 和 Next.js 如果开发出一个简单的电子商务网站并实现付款功能。
Stripe 简介
Stripe 是一家美国在线支付处理公司，为互联网公司和个人提供在线支付处理服务。Stripe 的主要服务是提供一套 API，开发者可以在自己的应用中使用该 API 来实现在线付款功能。Stripe 的服务范围涵盖了美国、加拿大、欧洲、亚洲、澳洲等地区。
Stripe 目前支持多种付款方式，如信用卡（Visa、MasterCard、American Express 等）、非信用卡支付（Alipay、WeChat Pay 等）等。同时，Stripe 还内置了一套防欺诈系统，可以有效保障网站付款的安全性。
Next.js 简介
Next.js 是一种 React 框架，它可以用于构建 SSR（服务器端渲染）应用程序和 SSG（静态网站生成）应用程序。Next.js 不需要复杂的配置和设置，可以在不同的环境中快速实现开发和部署。
Stripe 和 Next.js 的结合
Stripe API 是一套 REST API，可以与任何语言和框架一起使用。Next.js 也可以轻松与 Stripe API 结合使用。在本文中，我们将使用 Next.js 和 Stripe API 来实现一套付款功能。
实现方式
本文将演示如何在 Next.js 应用程序中集成 Stripe API，创建一个简单的付款流程，用于销售一种名为“Amazing T-shirt”的 T 恤。
在此前提下，我们需要完成以下主要步骤：
- 创建一个 Stripe 账户并生成 API 密钥。
- 设置客户端 Stripe.js 和 Elements。
- 根据所选 T 恤价格创建一个客户端 Checkout Session。
- 处理客户端 Checkout Session 回调。
- 使用 API 密钥验证支付。
接下来，我们将逐步演示如何实现这些步骤。
步骤 1：创建一个 Stripe 账户并生成 API 密钥
首先，我们需要访问 Stripe 网站，并注册一个账户。注册完成后，我们需要在 Stripe 控制面板中生成一个 API 密钥，以便在后续步骤中进行 API 调用。我们需要将 API 密钥存储在本地环境变量中，以保障安全性。
步骤 2：设置客户端 Stripe.js 和 Elements
接下来，我们将在客户端设置 Stripe.js 和 Elements，从而能够创建 Checkout Session。在客户端中，我们需要加载 Stripe.js 库，并使用 Elements 方法进行相应的设置。
在 Next.js 中，我们可以使用 Head 和 Script 标签来加载 Stripe.js 库，并设置相应的环境变量。
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
-----
------
------- -----------------------------------------
-------
---------- -----------
------
-
-并且，我们还需要在 JavaScript 中设置 API 密钥和 Stripe Elements。这里，我们需要引入 loadStripe 函数，该函数用于加载 Stripe.js 库，同时将 API 密钥传递给该库。
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------ ----- -------- -------------------- -
-- ---- --------- --- --- - --------- -- ------ ------
----- ------ - ----- ------------------------------------------
------ -
------ -
---------------- ------------------------------
-------------------- -----------------------------------
-------
--
--
-
------ ------- -------- -------------- ---------------- -------------------- ------ -- -
------ -
-----
---------- -----------
------
-
-接下来，我们需要在客户端界面中添加一个元素来处理支付的数据。我们可以使用 Stripe Elements 中的 <CardElement> 元素来实现这一功能。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------------
------ ------- -------- -------------- ---------------- -------------------- ------ -- -
----- ----------- - ----- -- -- -
----- ------- - ----- ------------------------------------- - ------- ------ ----------- -- ------------
----- ------ - ----- --------------------------- ---------- ---------- ---
--
------ -
-----
----------- ------------
------------ --
------- ------------------------- ------------
------
-
-步骤 3：根据所选 T 恤价格创建一个客户端 Checkout Session
在此步骤中，我们需要创建一个 Checkout Session，用于收集客户端付款信息并返回付款 ID。Stripe API 提供了一个 createCheckoutSession 的方法，我们可以在客户端从 API 中获取该方法并使用它来创建 Checkout Session。
在 Next.js 中，我们可以使用 API 路由来创建一个用于创建 Checkout Session 的 API。
-- -------------------- ---- -------
------ - ---------------- -------------- - ---- ------
------ ------ ---- --------
----- ------ - --- ------------------------------------- - ----------- ------------ --
------ ------- ----- ----- --------------- ---- ---------------- -- -
--- -
----- ------- - ----- ---------------------------------
--------------------- ---------
----------- --
----- -------- ---------
------------ ---- ---- ------- -- --- -------
------- ------------------------------------
------- ------
--------- ------
--------- --
---
----- ----------
------------ --------------------------------
----------- -------------------------------
---
---------------------- --- ---------- ---
- ----- ----- -
---------------------- ----------- ---- -------- ----------- ---
-
--步骤 4：处理客户端 Checkout Session 回调
客户端 Checkout Session 回调将在付款成功或失败后调用。我们需要在客户端代码中处理该回调并显示相应的成功或失败信息。
在客户端中，我们可以监听 onSessionCompleted 事件，并根据该事件的 paymentIntent 参数的状态，显示相应的成功或失败信息。
-- -------------------- ---- -------
------ - ----------- ---------- -------- - ---- -------
------ - --------- ------------ ------------ --------- - ---- -------------------------
----- ------------ - -
-------------- -----
------ -----
-
-------- -------------- ------- -
------ ------------- -
---- ---------------------
------ -
---------
-------------- ---------------
------ -----
-
---- ------------
------ -
---------
------ ---------------
-
--------
------ -----
-
-
------ ------- -------- -------------- ---------------- -------------------- ------ -- -
----- ------- --------- - ------------------- -------------
----- ------ - -----------
----- -------- - -------------
----- --------- ----------- - ---------------
----- ----------- - ----- -- -- -
----------------
--- -
----- -------- - ----- ------------------------------------- - ------- ------ ----------- -- -----------
----- ------ - ----- --------------------------- ---------- ----------- --
-- -------------- -
----- --- ---------------------------
-
- ----- ----- -
----- --- ------------- -- -------- -- ----------
- ------- -
-----------------
-
-
------------ -- -
----- ------------------- - ----- ------- -- -
----- ------------- - --------------------------
-- --------------------- --- ------------ -
---------- ----- --------------------- -------- ------------- --
- ---- -
---------- ----- ------------ -------- ---------------------------------------- --
-
-
-------------------------------------------------- --------------------
------ -- -- -
----------------------------------------------------- --------------------
-
-- ---
------ -
-----
----------- ------------
------------ --
------- --------------------- ---------------------- ------------
-------------------- -- ------- ------- ---------------
------------ -- ---------------------
------
-
-步骤 5：使用 API 密钥验证支付
在此步骤中，我们需要使用 API 密钥以及客户端和服务器端的代码来验证支付是否顺利完成。
在服务器端中，我们可以使用 Stripe API 和 API 密钥来验证支付，并将付款信息写入 Stripe Dashboard。
在客户端界面中，我们首先需要引入 Stripe 的 API 和 Elements。同时，我们还需要使用 loadStripe 函数加载 Stripe.js 库，并将 API 密钥传递给该库。
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------ ----- -------- -------------------- -
-- ---- --------- --- --- - --------- -- ------ ------
----- ------ - ----- ------------------------------------------
------ -
------ -
---------------- ------------------------------
-------------------- -----------------------------------
-------
--
--
-
------ ------- -------- -------------- ---------------- -------------------- ------ -- -
----- ------ -------- - ------------
----- ------- --------- - ------------
----- --------- ----------- - ------------
----- ------ -------- - ------------
----- ------- --------- - ------------
----- ------------ -------------- - ------------
----- --------- ----------- - ------------
----- --------- ----------- - ---------------
----- ----------- - ----- -- -- -
----------------
--- -
----- -------- - ----- ------------------------------------------------------------ -
--------------- -
----- ---------------------------------
---------------- -
-----
------
-------- -
------ --------
-----
------
------------ -----------
--------
--
--
--
--
-- ---------------- -
----- --- -----------------------------
-
-------------- -------------
- ----- ----- -
------------------
- ------- -
-----------------
-
-
------ -
-----
----------- ------------
------------ --
-----
------ ---------------------------
------ ----------- --------- ------------ ------------- -- ------------------------------- --
------
-----
------ -----------------------------
------ ------------ ---------- ------------- ------------- -- -------------------------------- --
------
-----
------ ---------------------------------
------ ----------- ------------ --------------- ------------- -- ---------------------------------- --
------
-----
------ ---------------------------
------ ----------- --------- ------------ ------------- -- ------------------------------- --
------
-----
------ -----------------------------
------ ----------- ---------- ------------- ------------- -- -------------------------------- --
------
-----
------ ---------------------------- ------------
------ ----------- ---------------- ------------------ ------------- -- ------------------------------------- --
------
-----
------ ---------------------------------
------ ----------- ------------ --------------- ------------- -- ---------------------------------- --
------
------- --------------------- ------------------------- ----------------
------
-
-结论
本文介绍了如何使用 Next.js 和 Stripe 来实现付款功能。我们了解了 Stripe API 和 Next.js 的基本概念，并通过一个实际例子演示了如何使用 Stripe 和 Next.js 实现付款功能。希望本文能够给您带来一些帮助，让您更好地理解如何使用 Stripe 和 Next.js 开发付款功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e3c3d947dc5bcb3092bb7