创建 Vue.js 无服务器结账表单：Stripe 函数和托管

我们现在正处于一个四部分系列的第二篇文章中，我们正在用 Vue.js 创建一个结账表单应用程序，该应用程序可以接受通过 Stripe API 进行的付款。在第一部分中，我们研究了无服务器函数的概念，在 Azure 中设置了一个函数，并将其连接到 Stripe 帐户。在这篇文章中，我们将重点关注将 Stripe 设置为无服务器函数，并将所有内容托管在 Github 上。

---

首先，我们将编写我们的函数并在门户中对其进行测试，但最终我们将将其转移到 Github，并让 Azure 拉入代码。我稍后会解释为什么要这样做。

现在，为了让它正常运行并可测试，我们将在门户中编写它，并填写请求主体以执行测试。但我们首先需要知道 Stripe 希望我们做什么。

等等...

使用 Stripe 作为无服务器函数

如果您查看 Stripe 的文档，您会发现我们需要在仪表板中获取 Stripe 令牌。这最终将反映我们表单提交的 POST 参数。Stripe 使其变得简单，因此使用其库为 Express 的服务器端函数变得相当容易

app.get('/', (req, res) => res.render('index.pug', { keyPublishable }));

app.post('/charge', (req, res) => {
  let amount = 500;

  stripe.customers
    .create({
      email: req.body.stripeEmail,
      source: req.body.stripeToken
    })
    .then(customer =>
      stripe.charges.create({
        amount,
        description: 'Sample Charge',
        currency: 'usd',
        customer: customer.id
      })
    )
    .then(charge => res.render('charge.pug'));
});

app.listen(4567);

但是，我们不需要为此设置所有 Node 和 Express，因为我们真正需要的是金额、货币、描述和令牌，我们可以将其与我们之前在门户函数视图中提供的测试代码集成。所以，让我们转到 Azure 门户，我们的函数在那里，并更新该默认测试代码以接受 Stripe 需要使用的参数，并在测试面板中填充 request.body。

我们将添加我们的 Stripe 测试密钥并启动一切。为了完全确定，我们将记录我们启动的内容

var stripe = require('stripe')('sk_test_whateveryourtestingkeyisgoeshere');
// ^ this is a stripe testing key

module.exports = function(context, req) {
  context.log('starting to get down');

如果我们有请求主体、电子邮件和令牌，那么让我们开始吧。我们将从电子邮件创建客户，然后使用该客户创建 Stripe 费用，并在创建费用时传入费用金额。

if (
  req.body &&
  req.body.stripeEmail &&
  req.body.stripeToken &&
  req.body.stripeAmt
){
  stripe.customers
    .create({
      email: req.body.stripeEmail,
      source: req.body.stripeToken
    })
    .then(customer => {
      context.log('starting the stripe charges');
      stripe.charges.create({
        amount: req.body.stripeAmt,
        description: 'Sample Charge',
        currency: 'usd',
        customer: customer.id
      });
    })
      ...

我们还希望测试这一切是否成功完成，或者是否出错。如果出错，我们需要记录该错误是什么。我们还将查看整个过程是否完全出错，确保我们始终适当地记录一切。

您会注意到我记录了很多信息。我认为知道某些东西出错是不够的。我想知道错误何时发生以及为什么发生，以便我可以追踪它。如果出现问题，这将使调试变得容易得多。

      ...
      .then(charge => {
        context.log('finished the stripe charges');
        context.res = {
          // status: 200
          body: 'This has been completed'
        };
        context.done();
      })
      .catch(err => {
        context.log(err);
        context.done();
      });
  } else {
    context.log(req.body);
    context.res = {
      status: 400,
      body: "We're missing something"
    };
    context.done();
  }
};

在 门户 右侧的测试区域，我们将用 stripeEmail、stripeToken（在本例中为测试令牌）和一些随机费用金额填充 request.body。当我们运行它时，我们可以看到它有效！我们获得 200 OK 状态，并且我们在输出中记录了 This has been completed。

Github 托管的无服务器函数

现在，让我们将所有内容放入 Github，因为现在它可以正常运行了。我们想这样做的一个主要原因是我们的函数将依赖 Stripe 的库。如果您访问 sample-stripe-handler 存储库，我为本教程创建的存储库，您会看到一个 package.json 文件。该文件中的最重要的几行是这些

"dependencies": {
  "stripe": "^5.3.0"
}

这告诉函数拉入 Stripe API 的正确版本，我们需要使用它才能使我们的应用程序正常运行。需要注意的是，您也可以使用此方法使用其他库编写其他类型的函数。这意味着可以创建的可能性是无限的！

我们将从我们的函数中提取所有内容到此存储库中。 这包括函数本身、package.json 文件，以及您将在 Azure 门户的右侧“查看文件”选项卡中看到的 function.json 文件的内容。

一旦我们在 Github 存储库中准备好了所有内容，我们将返回到 Azure 门户，因为现在我们必须让 Azure 知道我们想使用此存储库托管我们的函数，而不是我们的测试。我们仍然可以在门户中测试我们的函数 - 我们只是无法再通过 GUI 编辑它了。

单击“平台功能”选项卡，然后选择“部署选项”项目。

从这里，单击“设置”，然后单击“选择源”，将提供许多选项。我将选择 Github，因为这是我想托管我的内容的地方，但您可以看到还有很多其他方法可以做到这一点。

选择 Github 后，您将能够配置要使用哪个存储库作为您的部署源。我选择了我们之前创建的 sample-stripe-handler 存储库。

完成此操作并加载后，您将被带到一个“部署”屏幕，该屏幕显示您对存储库所做的最后一次提交。这意味着一切正常！

让我们进一步测试一下。我的函数第一次没有正常工作，因为我使用了 ES6。我本可以添加 Babel，但我只是将其转换回 ES5 并推送到 master 分支。您可以看到 function.json 作为最后一次部署而变为非活动状态，我的最新提交消息 - 主要是我的抱怨 - 现在是最新部署！太棒了。

我们不能太谨慎，因此，为了检查这些测试确实有效，我将转到 Stripe 仪表板。果然，我们的仪表板中显示了测试费用 😀

最后一件事！

我们不能忽视我们亲爱的朋友 CORS，我们需要正确启用它才能让所有内容像预期的那样进行通信。让我们转到仪表板中的函数，然后选择 CORS

在出现的提示中，我们将列入白名单我们的 localhost 开发服务器，以及我们的最终站点 URL。瞧！我们准备好了。

接下来...

我们在本文中完成了许多工作！接下来，我们将学习如何从仅在函数内部进行测试过渡，并让这个家伙与我们在 Vue.js 应用程序中构建的结账体验自由通信。敬请关注！