使用 Express.js 和 Stripe 集成支付系统-FunTeaLearn Online Web Tutorials

在现代互联网时代，支付系统已经成为了每个网站必不可少的一部分。而 Stripe 是一款被广泛使用的在线支付解决方案。本文将向你介绍如何使用 Express.js 和 Stripe 来集成一个支付系统。

Stripe 简介

Stripe 是一个在线支付解决方案，可以使用它来接受各种支付方式，包括信用卡、支付宝、微信等。Stripe 使用户无需设置一个独立的支付网关并让其符合各个银行和信用卡组织的要求，Stripe 可帮助你完成所有这些。Stripe 受欢迎的原因是它的 API 易于使用，且它将各种支付方式整合在一起，使得整个支付流程更加简单。

创建 Stripe 帐户

在开始创建一个 Stripe 的支付系统之前，你需要先创建一个 Stripe 帐户。按照下面的步骤来创建一个 Stripe 帐户：

打开 Stripe 的官方网站。
点击 Sign Up 创建新帐户。
填写注册表单并提交。
完成账户的验证，并开启开发者模式。

完成以上步骤后，你将获得一个 Stripe 发行密钥和一个测试密钥。这些密钥将在后面的步骤中使用。

集成 Stripe 到 Express.js

现在你需要创建一个基础的 Express.js 应用程序。在创建 Express.js 应用程序之前，需要安装 Node.js 和 npm。

首先，我们安装 Express.js：

npm install express --save

然后安装 Stripe.js：

npm install stripe --save

当你安装完上述模块之后，你就可以开始配置你的 Express.js 应用程序。下面是一个简单的实现：

// www.javascriptcn.com code example
const express = require('express');
const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');

const app = express();

app.get('/', function(req, res) {
  res.send('Stripe Payment App');
});

app.listen(3000, function() {
  console.log('Server is running on port 3000');
});

注意，这里我们用到了 Stripe 的密钥，请替换为你的 Stripe 密钥。

接下来，我们将定义一个路由来处理 "/checkout" 的 POST 请求。这里我们将收集客户端的付款信息和金额，并使用 Stripe.js 来创建一个 charge。

// www.javascriptcn.com code example
app.post('/checkout', function(req, res) {
  const token = req.body.stripeToken;
  const email = req.body.email;
  const amount = req.body.amount;

  stripe.charges.create({
    amount: amount,
    currency: 'USD',
    description: 'Payment',
    source: token,
    receipt_email: email
  }, function(err, charge) {
    if (err) {
      console.error(err);
      return res.status(500).send(err);
    }
    res.status(200).send();
  });
});

这里，我们首先获取了客户端的付款 token，然后收集客户的邮箱和金额信息，最后使用 Stripe.js 创建了一个 charge。当创建成功后，我们只需返回 200 状态码即可。

创建前端页面

在我们之前实现的基础之上，我们可以使用 HTML、CSS 和 JavaScript 来创建一个支付表单。这里使用 Bootstrap 框架来构建界面。下面的示例代码将显示一个基础的表单，其中包含 Stripe.js 的逻辑。

// www.javascriptcn.com code example
<!doctype html>
<html>
<head>
  <title>Stripe Payment Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
  <script>
  $(function() {
    var stripe = Stripe('YOUR_STRIPE_PUBLIC_KEY');

    $('#checkout-form').submit(function(e) {
      e.preventDefault();
      $('#charge-error').addClass('hidden');
      $('#charge-submit').attr('disabled', true);
      stripe.createToken(card).then(function(result) {
        if (result.error) {
          $('#charge-error').text(result.error.message);
          $('#charge-error').removeClass('hidden');
          $('#charge-submit').attr('disabled', false);
        } else {
          var token = result.token.id;
          var amount = $('#amount').val();
          var email = $('#email').val();
          $.ajax({
            url: '/checkout',
            method: 'POST',
            data: {stripeToken: token, amount: amount, email: email}
          }).done(function(res) {
            window.location.href = '/';
          }).fail(function(err) {
            console.log(err);
            $('#charge-error').text(err.responseJSON.error.message);
            $('#charge-error').removeClass('hidden');
            $('#charge-submit').attr('disabled', false);
          });
        }
      });
    });
  });
  </script>
</head>

<body>
  <div class="container">
    <h1>Stripe Payment Example</h1>
    <div class="row">
      <div class="col-md-6">
        <form id="checkout-form" method="POST">
          <div class="form-group">
            <label>Name on Card</label>
            <input type="text" class="form-control" id="card-name">
          </div>
          <div class="form-group">
            <label>Card Number</label>
            <input type="text" class="form-control" id="card-number">
          </div>
          <div class="form-group">
            <label>CVC</label>
            <input type="text" class="form-control" id="card-cvc">
          </div>
          <div class="form-group">
            <label>Email Address</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="form-group">
            <label>Amount</label>
            <input type="text" class="form-control" id="amount">
          </div>
          <div class="form-group">
            <div class="card-errors hidden" id="charge-error"></div>
          </div>
          <button type="submit" class="btn btn-success" id="charge-submit">Submit Payment</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

注意，这里我们需要替换 Stripe 的公钥。在上面的表单中，我们引入了 Stripe.js 并使用它创建了一个 token。当用户提交表单时，我们会使用 AJAX 发送一个 POST 请求到 Express.js API 中，并使用 Express.js API 来处理 Stripe 的 charge。

结语

通过本文的介绍，你可以学习如何使用 Express.js 和 Stripe 来集成一个支付系统。当然，本文还远远没有覆盖到所有的和支付相关的主题。Stripe API 提供了更加详细的文档，包括退款、发票和订阅等，这些都可以帮助你实现一个更加完整的支付系统。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6793a43d504e4ea9bd7fb791

使用 Express.js 和 Stripe 集成支付系统

Stripe 简介

创建 Stripe 帐户

集成 Stripe 到 Express.js

创建前端页面

结语

程序员教程

程序员面试题库