使用 Fastify 和 Stripe 进行支付处理的完整指南-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 应用程序中，处理支付是至关重要的一项任务。Stripe 是一种流行的支付处理服务，而 Fastify 是一种快速、低开销的 Node.js Web 框架。本文将介绍如何使用 Fastify 和 Stripe 进行支付处理，以及如何实现一个完整的支付流程。

准备工作

在开始之前，需要准备以下工具和资源：

Node.js 环境
Stripe 帐户和 API 密钥
Fastify 应用程序

如果您还没有 Stripe 帐户和 API 密钥，请前往 Stripe 网站注册并获取。如果您还没有 Fastify 应用程序，请使用以下命令在本地创建一个新的 Fastify 应用程序：

npm init fastify-app my-app

这将创建一个名为 my-app 的新 Fastify 应用程序，并安装所有必要的依赖项。

快速入门

在本节中，我们将介绍如何使用 Stripe API 进行支付处理。首先，您需要安装 stripe 模块：

npm install --save stripe

然后，您可以在 Fastify 应用程序中使用以下代码创建一个新的 Stripe 实例：

const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');

在上面的代码中，YOUR_STRIPE_SECRET_KEY 是您的 Stripe API 密钥。请确保将其替换为您自己的密钥。

接下来，您可以使用 Stripe API 创建一个新的付款：

// javascriptcn.com 代码示例
try {
  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1000,
    currency: 'usd',
    payment_method_types: ['card'],
  });
  console.log(paymentIntent);
} catch (err) {
  console.error(err);
}

在上面的代码中，我们创建了一个新的付款意图，其中包含了要付款的金额、货币类型和付款方式。付款意图的详细信息将被输出到控制台。

完整指南

在本节中，我们将介绍如何使用 Fastify 和 Stripe 实现一个完整的支付流程。我们假设您已经熟悉了 Fastify 和 Stripe 的基本概念，并且已经准备好开始实现一个完整的支付流程。

第一步：创建付款意图

在本节中，我们将使用 Stripe API 创建一个新的付款意图。我们将使用 Fastify 路由来处理来自客户端的请求，并将付款意图的 ID 返回给客户端。

首先，让我们在 Fastify 应用程序中创建一个新的路由：

// javascriptcn.com 代码示例
fastify.post('/create-payment-intent', async (request, reply) => {
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: request.body.amount,
      currency: 'usd',
      payment_method_types: ['card'],
    });
    reply.send({ clientSecret: paymentIntent.client_secret });
  } catch (err) {
    reply.status(500).send({ error: err.message });
  }
});

在上面的代码中，我们使用 stripe.paymentIntents.create 方法创建一个新的付款意图，并将其 ID 返回给客户端。请注意，我们使用 request.body.amount 获取客户端发送的付款金额。

第二步：创建客户端

在本节中，我们将使用 Stripe Elements 和 Stripe API 创建一个新的客户端。我们将使用 JavaScript 和 HTML/CSS 来实现客户端，并使用 Fastify 路由将客户端连接到服务器。

首先，让我们创建一个新的 HTML 文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Stripe Payments</title>
    <script src="https://js.stripe.com/v3/"></script>
    <style>
      .container {
        max-width: 400px;
        margin: 0 auto;
      }
      .form {
        margin-top: 20px;
      }
      .form input {
        display: block;
        margin-bottom: 10px;
      }
      .form button {
        display: block;
        margin-top: 20px;
        padding: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="card-element"></div>
      <form id="payment-form" class="form">
        <input type="number" name="amount" placeholder="Amount">
        <button type="submit" id="submit-button">Pay</button>
      </form>
    </div>
    <script>
      const stripe = Stripe('YOUR_STRIPE_PUBLIC_KEY');
      const elements = stripe.elements();
      const cardElement = elements.create('card');
      cardElement.mount('#card-element');
      const form = document.getElementById('payment-form');
      const submitButton = document.getElementById('submit-button');
      form.addEventListener('submit', async (event) => {
        event.preventDefault();
        submitButton.disabled = true;
        const { paymentIntent, error } = await fetch('/create-payment-intent', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ amount: form.amount.value })
        }).then(res => res.json());
        if (error) {
          alert(error);
          submitButton.disabled = false;
          return;
        }
        const { paymentMethod, error: paymentError } = await stripe.createPaymentMethod({
          type: 'card',
          card: cardElement
        });
        if (paymentError) {
          alert(paymentError.message);
          submitButton.disabled = false;
          return;
        }
        const { error: confirmError } = await stripe.confirmCardPayment(paymentIntent.clientSecret, {
          payment_method: paymentMethod.id
        });
        if (confirmError) {
          alert(confirmError.message);
          submitButton.disabled = false;
          return;
        }
        alert('Payment succeeded!');
        submitButton.disabled = false;
      });
    </script>
  </body>
</html>

在上面的代码中，我们使用 Stripe Elements 和 Stripe API 创建了一个新的客户端。客户端包含一个表单，用户可以在其中输入付款金额，并使用 Stripe Elements 来输入信用卡信息。当用户提交表单时，客户端将使用 Fastify 路由将付款意图发送到服务器，并使用 Stripe API 处理付款。

请注意，我们在客户端代码中使用 YOUR_STRIPE_PUBLIC_KEY 替换了 Stripe API 公钥。请确保将其替换为您自己的公钥。

第三步：启动 Fastify 应用程序

现在，我们已经完成了 Fastify 应用程序和客户端的编写。最后一步是启动 Fastify 应用程序，并在浏览器中打开客户端。

在命令行中，使用以下命令启动 Fastify 应用程序：

npm start

然后，在浏览器中打开 http://localhost:3000，您应该能够看到一个简单的付款表单。输入付款金额并提交表单，然后使用 Stripe Elements 来输入信用卡信息。如果一切正常，您应该会看到一个成功的付款消息。

总结

在本文中，我们介绍了如何使用 Fastify 和 Stripe 进行支付处理，并实现了一个完整的支付流程。我们首先介绍了 Stripe API 的快速入门，然后详细介绍了如何使用 Fastify 和 Stripe 实现一个完整的支付流程。我们希望这篇文章对您有所帮助，并且能够为您的 Web 应用程序带来更好的支付处理体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657d4e04d2f5e1655d81d24d