type
Post
status
Published
date
Feb 8, 2026
slug
nextjs-shopping-platform-015
summary
tags
Next.js
category
编程学习
icon
password
1. Section Intro
In this section we are going to add Stripe Payments to our application. It's nice to give your users a few options to pay.
在本章节中，我们将为应用程序添加 Stripe 支付功能。为用户提供几种支付方式是很好的做法。
We first need to setup our Sripe account to use test mode. That's as simple as flipping a switch. We also need to get our api keys and add them to both the .env and the Vercel platform environment variables.
我们首先需要设置我们的 Stripe 账户以使用测试模式。这就像拨动开关一样简单。我们还需要获取 API 密钥并将它们添加到 .env 文件和 Vercel 平台环境变量中。
We then need to create what is called a payment intent. This is a core concept in Stripe's API that represents a specific transaction for collecting payment from a customer. The Sripe API gives us the methods that we need for this. So we will be installing a few NPM packages to work with Stripe.
然后我们需要创建所谓的支付意图（payment intent）。这是 Stripe API 中的一个核心概念，代表从客户那里收取付款的特定交易。Stripe API 为我们提供了实现这一点所需的方法。因此，我们将安装一些 NPM 包来使用 Stripe。
We then need to create the payment and form component. This will show the credit card and expiration inputs on the order details page. Stripe also gives us a fake credit card to work with to test things.
然后我们需要创建支付和表单组件。这将在订单详情页面上显示信用卡和有效期输入框。Stripe 还为我们提供了一个假信用卡来进行测试。
Then we need to create a payment success page.
然后我们需要创建一个支付成功页面。
The last thing we need to do is create a webook, which is tells one service when something from another service happens. We need to notify our app when a payment succeeds. They we can mark it in our database that it was paid. It's important to know that thos webhook will be for our live site. Because it needs to be able to make a request to our project and it can't do that to our localhost.
我们需要做的最后一件事是创建一个 webhook，它会在一个服务中发生某些事情时通知另一个服务。我们需要在支付成功时通知我们的应用程序。然后我们可以在数据库中标记该订单已支付。重要的是要知道，这个 webhook 是用于我们的实时站点的。因为它需要能够向我们的项目发出请求，而它无法向我们的本地主机发出请求。
Alright, let's get started with Sripe.
好的，让我们开始使用 Stripe。
2. Stripe Setup Stripe 设置
In order to use Stripe, you need to create an account. I have an account that I use for my real projects, but I created a dev account for tutorials and courses.
为了使用 Stripe，您需要创建一个账户。我有一个用于真实项目的账户，但我为教程和课程创建了一个开发账户。
Log in or create an account here: https://dashboard.stripe.com/register
在此登录或创建账户：https://dashboard.stripe.com/register
Once you are logged in, you will see the dashboard.
登录后，您将看到仪表板。
Make sure that the Test Mode switch is on. This is important because you don't want to use your real credit card information or real payments.
确保测试模式开关已打开。这很重要，因为您不想使用真实的信用卡信息或进行真实支付。
One you are ready to go live, then you would switch this off and you need to go through and add your business info and bank account information.
一旦您准备好上线，就需要关闭此开关，并添加您的业务信息和银行账户信息。
Click on the "Developers" link next to the test mode switch. Then click the "API Keys" tab. You want to add your key to the
.env file.
点击测试模式开关旁边的"Developers"链接。然后点击"API Keys"标签页。您需要将密钥添加到 .env 文件中。Copy the secret key and add it to the file. It should look something like this:
复制密钥并将其添加到文件中。它应该看起来像这样：
You also need to add the publishable key to the
.env file. It should look something like this:
您还需要将可发布密钥添加到 .env 文件中。它应该看起来像这样：Be sure to add the
NEXT_PUBLIC_ prefix to the key.
确保为密钥添加 NEXT_PUBLIC_ 前缀。Install The Stripe Package 安装 Stripe 包
We need to install the Stripe NPM package and the package that integrates Stripe with React. Open a terminal and run the following command:
我们需要安装 Stripe NPM 包以及将 Stripe 与 React 集成的包。打开终端并运行以下命令：
The
@stripe/stripe-js package is a JavaScript library that provides a set of APIs for interacting with Stripe's payment processing services.
@stripe/stripe-js 包是一个 JavaScript 库，提供了一组用于与 Stripe 支付处理服务交互的 API。The
@stripe/react-stripe-js package is an official Stripe library that provides a set of React components and hooks to make it easier to integrate Stripe's payment elements in your React application. It's designed to work with Stripe’s Elements API, which is a UI library for creating custom payment forms.
@stripe/react-stripe-js 包是一个官方的 Stripe 库，提供了一组 React 组件和钩子，以便更容易在您的 React 应用程序中集成 Stripe 的支付元素。它设计用于与 Stripe 的 Elements API 配合使用，后者是一个用于创建自定义支付表单的 UI 库。Now that we have Stripe setup in test mode and we have the packages that we need, we can start building the Stripe payment form.
现在我们已经在测试模式下设置了 Stripe，并且拥有所需的包，我们可以开始构建 Stripe 支付表单了。
3. Order Form Payment Intent
Update Order Form 更新订单表单
Before we create the actual Stripe form, we need to update the order form and include something called payment intent and the client secret, which I'll go over in a minute.
在创建实际的 Stripe 表单之前，我们需要更新订单表单，并包含所谓的支付意图（payment intent）和客户端密钥（client secret），我稍后会详细介绍。
Open the
app/(root)/order/[id]/page.tsx file and add the following import:
打开 app/(root)/order/[id]/page.tsx 文件并添加以下导入：In the
OrderDetailsPage component, right under the session variable, add the following:
在 OrderDetailsPage 组件中，在 session 变量的正下方，添加以下内容：We are just setting the
client_secret variable null for now.
我们现在只是将 client_secret 变量设置为 null。Then we are checking to see if the payment method is Stripe and if the order is not paid. If it is, we are creating a new Stripe payment intent.
然后我们检查支付方式是否为 Stripe 以及订单是否尚未支付。如果是，我们将创建一个新的 Stripe 支付意图。
What Is a Payment Intent? 什么是支付意图？
A Payment Intent is a core concept in Stripe's API that represents a specific transaction for collecting payment from a customer. It’s a record of an attempt to collect money, containing all the information to complete a payment, track its status, and handle any required authentication.
支付意图（Payment Intent）是 Stripe API 中的一个核心概念，代表从客户那里收取付款的特定交易。它是收取款项的尝试记录，包含完成支付、跟踪其状态以及处理任何所需身份验证的所有信息。
Here are the steps involved in creating a Payment Intent:
以下是创建支付意图的步骤：
- Create a payment intent: This is the initial step where you define the details of the payment, such as the amount, currency, and any additional metadata. 创建支付意图：这是初始步骤，您在此定义支付的详细信息，例如金额、货币和任何附加元数据。
- Confirm the payment on the Client: Using Stripe’s JavaScript SDK (like @stripe/react-stripe-js), the front-end uses the client_secret to confirm the payment. 在客户端确认支付：使用 Stripe 的 JavaScript SDK（如 @stripe/react-stripe-js），前端使用 client_secret 来确认支付。
- * Check payment status**: Stripe processes the payment and updates the payment intent status. The Payment Intent’s status updates throughout the process, providing real-time insights. The status could be: 检查支付状态：Stripe 处理支付并更新支付意图状态。支付意图的状态在整个过程中会更新，提供实时信息。状态可能是：
- Requires Payment Method: If no payment method has been attached. 需要支付方式：如果尚未附加支付方式。
- Requires Confirmation: If the payment needs confirmation (e.g., from the client). 需要确认：如果支付需要确认（例如，来自客户端）。
- Requires Action: If additional steps like 3D Secure are needed. 需要操作：如果需要额外步骤，如 3D 安全验证。
- Processing: If the payment is in progress. 处理中：如果支付正在进行中。
- Succeeded: If the payment is complete. 成功：如果支付已完成。
- Canceled or Failed: If the payment did not succeed or was canceled. 已取消或失败：如果支付未成功或已被取消。
- Handle Payment Success or Failure: Upon confirmation, if the payment is successful, the Payment Intent’s status will update to succeeded. Your backend can use webhooks (like listening for the payment_intent.succeeded event) to trigger further actions, such as sending order confirmation emails, updating the order status, or providing access to digital goods. We're going to do this as well. 处理支付成功或失败：确认后，如果支付成功，支付意图的状态将更新为成功。您的后端可以使用 webhooks（如监听 payment_intent.succeeded 事件）来触发进一步的操作，例如发送订单确认电子邮件、更新订单状态或提供数字商品的访问权限。我们也将这样做。
Back to our code, the
stripe.paymentIntents.create method takes in an object with the following properties:
回到我们的代码，stripe.paymentIntents.create 方法接受一个具有以下属性的对象：amount: The amount to be charged in the smallest currency unit. For example, $10.00 would be 1000 (1000 cents).amount：以最小货币单位收取的金额。例如，$10.00 就是 1000（1000 美分）。
currency: The currency in which the payment will be made.currency：将进行支付的货币。
metadata: Additional information about the payment, such as the order ID.metadata：关于支付的附加信息，例如订单 ID。
Then we are setting the
client_secret variable to the paymentIntent.client_secret property.
然后我们将 client_secret 变量设置为 paymentIntent.client_secret 属性。Now we want to pass the
client_secret variable to the OrderDetailsPage component just like we did the PayPal client ID.
现在我们想将 client_secret 变量传递给 OrderDetailsPage 组件，就像我们之前传递 PayPal 客户端 ID 一样。Now we need to update the
OrderDetailsTable component to include the Stripe payment form. Open the app/(root)/order/[id]/order-details-table.tsx file and take in the new prop:
现在我们需要更新 OrderDetailsTable 组件以包含 Stripe 支付表单。打开 app/(root)/order/[id]/order-details-table.tsx 文件并接受新属性：Create a Stripe Payment Component 创建 Stripe 支付组件
We need to create a new component to handle the Stripe payment form. For now, we will just create it as a placeholder.
我们需要创建一个新组件来处理 Stripe 支付表单。现在，我们只是将其创建为占位符。
Create a new file called
stripe-payment.tsx in the app/(root)/order/[id] directory and add the following code:
在 app/(root)/order/[id] 目录中创建一个名为 stripe-payment.tsx 的新文件，并添加以下代码：It takes in the
priceInCents, orderId, and clientSecret as props. Stripe uses the lowest denomination of a currency for simplicity. For example, $10.00 would be 1000 (1000 cents).
它接受 priceInCents、orderId 和 clientSecret 作为属性。为简单起见，Stripe 使用货币的最小面额。例如，$10.00 就是 1000（1000 美分）。Now, back in the
OrderDetailsTable component, we can import the StripePayment component and use it in the Stripe payment method.
现在，回到 OrderDetailsTable 组件，我们可以导入 StripePayment 组件并在 Stripe 支付方式中使用它。In the return, add the following right under where we check for paypal and use the
<PayPalScriptProvider> component:
在返回值中，在我们检查 paypal 并使用 <PayPalScriptProvider> 组件的正下方添加以下内容：We are passing in the priceInCents by multiplying the total price by 100. We are also passing in the
orderId and clientSecret as props.
我们通过将总价乘以 100 来传递 priceInCents。我们还传递了 orderId 和 clientSecret 作为属性。Now add something to the cart, go through the process and select Stripe as the payment method. Place the order and you should see the text
STRIPE FORM in the browser.
现在向购物车添加一些东西，完成流程并选择 Stripe 作为支付方式。下单后，您应该在浏览器中看到文本 STRIPE FORM。In the next lesson, we wil create the actual Stripe form.
在下一课中，我们将创建实际的 Stripe 表单。
4. Stripe Payment Component Stripe支付组件
In the last lesson, we created the StripePayment component and just returned a placeholder for now. In this lesson, we will create the actual Stripe form.
在上一课中，我们创建了StripePayment组件，目前只是返回了一个占位符。在本课中，我们将创建实际的Stripe表单。
Open the file
app/(root)/order/[id]/stripe-payment.tsx and add the following imports:
打开文件app/(root)/order/[id]/stripe-payment.tsx并添加以下导入：As you can see, we are using quite a few components from the React Stripe library. The
Elements component is used to wrap the entire payment form and provide the Stripe context to the child components. The LinkAuthenticationElement is used to collect the customer's email address and phone number. The PaymentElement is used to collect the payment details. The useElements and useStripe hooks are used to access the Stripe context and the Stripe instance.
https://www.npmjs.com/package/@stripe/react-stripe-js
正如您所见，我们使用了React Stripe库中的不少组件。Elements组件用于包装整个支付表单，并为子组件提供Stripe上下文。LinkAuthenticationElement用于收集客户的电子邮件地址和电话号码。PaymentElement用于收集支付详情。useElements和useStripe钩子用于访问Stripe上下文和Stripe实例。Then we have the
loadStripe function from the Stripe library. This will initialize and configure Stripe within the app. It sets up Stripe’s client SDK by asynchronously loading the Stripe.js library and creating an instance that interacts with Stripe's API.
然后我们有Stripe库中的loadStripe函数。这将在应用程序中初始化和配置Stripe。它通过异步加载Stripe.js库并创建一个与Stripe API交互的实例来设置Stripe的客户端SDK。@stripe/stripe-js is the official Stripe JavaScript library, which provides tools like loadStripe to help set up and use Stripe in web applications.
/pure is a special entry point in this library that is side-effect-free. Which means it doesn't automatically modify global variables or state upon import, which makes it safer for environments that depend on strict module isolation (such as server-side rendering). If you were building a SPA, you would most likely use the regular loadStripe function from the @stripe/stripe-js without the /pure suffix.
@stripe/stripe-js是官方的Stripe JavaScript库，它提供了诸如loadStripe之类的工具，帮助在Web应用程序中设置和使用Stripe。/pure是该库中的一个特殊入口点，它是无副作用的。这意味着它在导入时不会自动修改全局变量或状态，这使得它对于依赖严格模块隔离的环境（如服务器端渲染）更加安全。如果您正在构建SPA，您很可能会使用@stripe/stripe-js中的常规loadStripe函数，而不带有/pure后缀。The
useTheme hook is used to get the current theme from the next-themes package. The reason we are using this is because we want to use the Stripe payment form in both light and dark mode. If we didn't use this, then the payment form would be in the wrong color scheme.
useTheme钩子用于从next-themes包中获取当前主题。我们使用它的原因是因为我们希望在亮色和暗色模式下都能使用Stripe支付表单。如果我们不使用这个，那么支付表单的配色方案就会不正确。We need to call the
loadStripe function, which returns a promise that resolves to an instance of the Stripe object, which allows interaction with Stripe’s API. It needs to be passed the publishable key from the .env file.
我们需要调用loadStripe函数，它返回一个Promise，该Promise解析为Stripe对象的实例，允许与Stripe API进行交互。它需要从.env文件中传入可发布密钥。Add the following code above the return of the
StripePayment function:
在StripePayment函数的return语句上方添加以下代码：We are putting the returned promise in a variable called
stripePromise so that we can use it later in the component. We also initialized the useTheme hook to get the current theme and the system theme.
我们将返回的Promise存储在一个名为stripePromise的变量中，以便稍后在组件中使用。我们还初始化了useTheme钩子以获取当前主题和系统主题。StripeForm Component StripeForm组件
We are going to have a nested component called
StripeForm that will handle the form submission and payment processing. This will be passed into the StripePayment component, which will return an Elements component from the @stripe/react-stripe-js package. I know it's a bit confusing.
我们将有一个名为StripeForm的嵌套组件，它将处理表单提交和支付处理。这将被传递到StripePayment组件中，该组件将返回一个来自@stripe/react-stripe-js包的Elements组件。我知道这有点令人困惑。So add the
StripeForm function within the StripePayment component like this:
因此，在StripePayment组件中添加StripeForm函数，如下所示：Now, within the
StripeForm function, we are going to initialize the Stripe instance and the Elements instance. We are also going to initialize the loading state, error message, and email address.
现在，在StripeForm函数中，我们将初始化Stripe实例和Elements实例。我们还将初始化加载状态、错误消息和电子邮件地址。We are using the
useStripe and useElements hooks to get the Stripe instance and the Elements instance. We are also using the useState hook to manage the loading state, error message, and email address.
我们使用useStripe和useElements钩子来获取Stripe实例和Elements实例。我们还使用useState钩子来管理加载状态、错误消息和电子邮件地址。Now let's add the return for the
StriptForm component.
现在让我们为StriptForm组件添加返回值。We are using the
PaymentElement component from the @stripe/react-stripe-js package. This is the form that will be displayed to the user. This component is a pre-built UI element from Stripe that displays the payment input fields (like card details). We don't manually create these form inputs. The PaymentElement component automatically adapts to the Payment Intent and configured payment methods, handling sensitive information securely without the developer needing to build custom input fields.
我们使用来自@stripe/react-stripe-js包的PaymentElement组件。这是将显示给用户的表单。这个组件是Stripe提供的预构建UI元素，用于显示支付输入字段（如卡片详情）。我们不需要手动创建这些表单输入。PaymentElement组件会自动适应支付意图和配置的支付方式，安全地处理敏感信息，而无需开发人员构建自定义输入字段。We are also using the
LinkAuthenticationElement component from the @stripe/react-stripe-js package. This is another Stripe UI component that allows users to enter their email. If they’re using Stripe Link (a feature that lets users save their payment details), this email input can help recognize returning customers. The onChange prop just sets the email state.
我们还使用来自@stripe/react-stripe-js包的LinkAuthenticationElement组件。这是另一个Stripe UI组件，允许用户输入他们的电子邮件。如果他们使用Stripe Link（一个允许用户保存支付详情的功能），这个电子邮件输入可以帮助识别回头客。onChange属性只是设置email状态。Then we just have a button that will submit the form.
然后我们只有一个将提交表单的按钮。
We are using the
handleSubmit function to handle the submission. So we need to create that.
我们使用handleSubmit函数来处理提交。所以我们需要创建它。Add the the following above the return statement of the
StripeForm function:
在StripeForm函数的return语句上方添加以下内容：We are using the
confirmPayment method from the stripe instance to confirm the payment. We are also using the confirmParams object to set the return URL for the payment. The user will be sent to the return URL after the payment is completed. This means that we need to create a route that will handle the payment success.
我们使用stripe实例中的confirmPayment方法来确认支付。我们还使用confirmParams对象来设置支付的返回URL。支付完成后，用户将被发送到返回URL。这意味着我们需要创建一个将处理支付成功的路由。We are using the
then method to handle the response from the confirmPayment method. We are using the finally method to set the loading state to false.
我们使用then方法来处理confirmPayment方法的响应。我们使用finally方法将加载状态设置为false。StripePayment Component Return StripePayment组件返回值
This component will return an
<Elements> component from the @stripe/react-stripe-js package and it will take in the stripePromise as a prop and wrap the StripeForm component.
这个组件将返回一个来自@stripe/react-stripe-js包的<Elements>组件，它将接收stripePromise作为属性，并包装StripeForm组件。Add the following for the return statement of the
StripePayment component:
为StripePayment组件的return语句添加以下内容：We are also setting the theme based on the theme and system theme. This will allow us to use the Stripe theme and the Stripe night theme.
我们还根据主题和系统主题设置主题。这将允许我们使用Stripe主题和Stripe夜间主题。
Now you should see the form. It should look like this:
现在您应该可以看到表单了。它应该看起来像这样：
Test The Stripe Form 测试Stripe表单
Make sure you are in test mode and then try the form using the following test card details:
确保您处于测试模式，然后使用以下测试卡详情尝试表单：
- Card Number: 4242 4242 4242 4242 卡号：4242 4242 4242 4242
- Expiry Date: 12/34 有效期：12/34
- CVC: 123
- ZIP: ANy 5 digit code 邮政编码：任意5位数字
You should be redurected to the success page, which does not exist yet but your URL should look something like this:
您应该会被重定向到成功页面，该页面尚不存在，但您的URL应该看起来像这样：
Here is the complete code for the
StripePayment component:
以下是StripePayment组件的完整代码：5. Payment Success Page 支付成功页面
Now that we have the Stripe payment form working, we need to create a page that will be displayed when the payment is successful.
既然我们已经让 Stripe 支付表单正常工作了，现在需要创建一个页面，用于在支付成功时显示。
Create a new file at
app/(root)/order/[id]/stripe-payment-success/page.tsx and add the following:在
app/(root)/order/[id]/stripe-payment-success/page.tsx 路径下创建一个新文件，并添加以下内容：We are retrieving the order id and payment intent id from the URL. We are then fetching the order from the database. We are then retrieving the payment intent from Stripe. We are then checking if the payment intent is valid. We are then checking if the payment intent is successful. If it is, we are redirecting to the order page. If it is not, we are redirecting to the order page.
我们从 URL 中获取订单 ID 和支付意图 ID。然后从数据库中获取订单信息。接着从 Stripe 检索支付意图。然后检查支付意图是否有效。之后检查支付意图是否成功。如果成功，我们重定向到订单页面。如果不成功，我们也重定向到订单页面。
Refresh the page or make another order and you should see the payment success page.
刷新页面或再次下单，你应该就能看到支付成功页面了。
Now the issue we have left is that it has not been marked paid in the database. We need to setup a webhook to update the order when the payment is successful. We'll do that next.
现在我们剩下的问题是，订单在数据库中还没有被标记为已支付。我们需要设置一个 Webhook，在支付成功时更新订单状态。我们接下来将进行这项工作。
6. Webhook To Mark Order As Paid
Webhook for Payment
Now that we can go through and make a payment with Stripe, we need to create a webhook that will listen for the payment event and then update our database.
既然我们已经可以通过 Stripe 完成支付了，现在需要创建一个 Webhook 来监听支付事件，然后更新我们的数据库。
What Is a Webhook? 什么是 Webhook？
A webhook is a way for a service to notify another service when something happens. In our case, we want to notify our app when a payment is made and then we can mark it as paid.
Webhook 是一种服务在发生某些事情时通知另一个服务的方式。在我们的案例中，我们希望在完成支付时通知我们的应用程序，然后将订单标记为已支付。
This is done on the production website. You can do it locally, however, you need to install the Stripe CLI and it can get a bit tricky. So we are going to just set the webhook on the production website.
这需要在生产网站上完成。你可以在本地进行，但是需要安装 Stripe CLI，这可能会有些复杂。所以我们将只在生产网站上设置 Webhook。
If you have been following along, then you already have your project deployed to Vercel. So as long as you push to your GitHub repo, it will automatically deploy. If you don't have it deployed, then you can deploy it to Vercel. Go back to the video where we deployed the project and follow the steps there.
如果你一直在跟着做，那么你已经将项目部署到 Vercel 了。所以只要你推送到 GitHub 仓库，它就会自动部署。如果你还没有部署，那么可以将其部署到 Vercel。回到我们部署项目的视频，按照那里的步骤操作。
Create a Webhook Endpoint 创建 Webhook 端点
We need to create a webhook endpoint and register it with Stripe. Create a new file at
app/api/webhooks/stripe/route.ts.我们需要创建一个 Webhook 端点并在 Stripe 中注册它。在
app/api/webhooks/stripe/route.ts 路径下创建一个新文件。You can read about the code that we are working with here: https://docs.stripe.com/webhooks/quickstart?lang=node
你可以在这里阅读我们正在使用的代码：https://docs.stripe.com/webhooks/quickstart?lang=node
Basically, we need to create a route that will listen for the payment event and then update our database. We do this using the
stripe.webhooks.constructEvent function. We do need a webhook secret, which we can get from the Stripe dashboard. We'll do that after.基本上，我们需要创建一个路由来监听支付事件，然后更新我们的数据库。我们使用
stripe.webhooks.constructEvent 函数来完成这个工作。我们确实需要一个 webhook 密钥，可以从 Stripe 仪表板获取。我们稍后会这样做。Add the following code to the route file:
在路由文件中添加以下代码：
The comments are pretty self-explanatory. We are using the
stripe.webhooks.constructEvent function to construct the event. We are then checking if the event type is charge.succeeded and if it is, we are updating the order status to paid.这些注释相当不言自明。我们使用
stripe.webhooks.constructEvent 函数来构建事件。然后我们检查事件类型是否是 charge.succeeded，如果是，我们将订单状态更新为已支付。We need to get the webhook secret from the Stripe dashboard.
我们需要从 Stripe 仪表板获取 Webhook 密钥。
Register the Webhook Endpoint 注册 Webhook 端点
Click on "Create an event destination"
点击"创建事件目标"
Make sure that "Add Endpoint" is selected.
确保选中"添加端点"。
For the endpoint URL, we need to use the URL of our webhook endpoint on our production website. So you want to use your Vercel domain.
对于端点 URL，我们需要使用生产网站上 Webhook 端点的 URL。所以你应该使用你的 Vercel 域名。
It should look something like this but with your Vercel domain.
它应该看起来像这样，但要用你的 Vercel 域名。
Click on "Select Events"
点击"选择事件"
Search for "charge" and select "charge.succeeded" and then "Add event".
搜索"charge"，选择"charge.succeeded"，然后点击"添加事件"。
Then click on "Add endpoint"
然后点击"添加端点"
Now where it says "Signing secret", click to reveal and add that to your PRODUCTION website on Vercel. So in your Vercel environment variables add the following:
现在在显示"签名密钥"的地方，点击显示并将其添加到你在 Vercel 上的生产网站中。所以在你的 Vercel 环境变量中添加以下内容：
Make sure your code is deployed to Vercel and go to the live version and go through the process to make an order and use Stripe to make payment.
确保你的代码已部署到 Vercel，然后访问实时版本，完成下单流程并使用 Stripe 进行支付。
You should be able to place an order and then see the order status change to paid.
你应该能够下单，然后看到订单状态变为已支付。
You can then go to https://dashboard.stripe.com/test/webhooks to see the webhook event that was triggered.
然后你可以访问 https://dashboard.stripe.com/test/webhooks 查看触发的 Webhook 事件。
We now have Stripe fully integrated with our app.
现在我们已经将 Stripe 完全集成到我们的应用中了。
📎 参考文章
- 一些引用
- 引用文章
欢迎您在底部评论区留言，一起交流~
Loading...