Javascript 从HTML获取付款金额以在Node.js文件中收费

我到处寻找答案，但没有找到解决办法。我使用Stripe向用户收费，但是，付款不应该硬编码，因为价格根据回答的各种问题而变化。我想做的是获取确认页面（HTML）上给出的“总价”，并将该金额计入Stripe（使用节点）

我目前有代币化工作，当金额硬编码时收费成功，但我需要更改收费金额。有人知道Stripe（www.Stripe.com）是否可以做到这一点吗

我的app.js文件（部分）：

// charge route
app.post('/charge', (req, res) => {
  const amount = 2500; <-- needs to change to not be hardcoded

  stripe.customers.create({
    email: "random-email@gmail.com",
    source: req.body.mytoken
  })
  .then(customer =>  {
    stripe.charges.create({
    amount,
    description:'item desc',
    currency:'usd',
    customer:customer.id
  })})
  .then(charge => res.send('success'));
});

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

function stripeTokenHandler(token) {
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');

    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);

    form.appendChild(hiddenInput);
    var formData = JSON.stringify({
      mytoken: token.id
    });

    $.ajax({
      type: "POST",
      url: "/charge",
      data: formData,
      success: function(){alert("done")},
      dataType: "json",
      contentType: "application/json"
    });
    form.submit();
  }

在脚本标记的HTML页面底部找到的函数：

// charge route
app.post('/charge', (req, res) => {
  const amount = 2500; <-- needs to change to not be hardcoded

  stripe.customers.create({
    email: "random-email@gmail.com",
    source: req.body.mytoken
  })
  .then(customer =>  {
    stripe.charges.create({
    amount,
    description:'item desc',
    currency:'usd',
    customer:customer.id
  })})
  .then(charge => res.send('success'));
});

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

function stripeTokenHandler(token) {
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');

    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);

    form.appendChild(hiddenInput);
    var formData = JSON.stringify({
      mytoken: token.id
    });

    $.ajax({
      type: "POST",
      url: "/charge",
      data: formData,
      success: function(){alert("done")},
      dataType: "json",
      contentType: "application/json"
    });
    form.submit();
  }

---

您需要做的是从前端到后端进行通信，并告诉后端收取一定金额的条带费+一定的电子邮件费。实现这一点的方法是使用javascript从前端向节点后端发出POST请求。以下是您需要做的：

• 在服务器代码中设置POST端点以接收POST请求。在post请求中，您将收到指示收费金额的数据和电子邮件，然后通过之前硬编码的代码执行剥离收费。显示了创建POST端点的示例
• 在前端中，创建一个javascript方法，该方法在单击表单上的submit按钮时运行。在该函数中，使用在后端中创建的URL向后端发出post请求

---

answer提供了一个使用此方法将数据从前端发送到后端的快速示例。

您需要在Express中从表单检索POST数据。

---

方法1（隐藏输入） 基于当前实现的最小阻力路径

首先，您需要确保将总金额从表单传递到后端：

function stripeTokenHandler(token) {
  var form = document.getElementById('payment-form');

  var token = document.createElement('input');
  token.setAttribute('type', 'hidden');
  token.setAttribute('name', 'stripeToken');
  token.setAttribute('value', token.id);

  var totalAmount = document.createElement('input');
  token.setAttribute('type', 'hidden');
  token.setAttribute('name', 'totalAmount');
  token.setAttribute('value', $('#new_text').innerHTML);
  // or, prefereably, grab this directly from the var you're using to update the #new_text span's value

  form.appendChild(token);
  form.appendChild(totalAmount);

  // You could also just use the variables here (i.e. token.id) instead of grabbing it from the inputs generated above
  var formData = JSON.stringify({
    mytoken: token.value,
    totalAmount: totalAmount.value
  });

  // You're not actually referencing the form here, so you don't technically need to append the inputs above.
  // I've only included them for consistency. You're setting the values to be submitted to /charge when you set
  // the variable formData above and then passing it via the data property of $.ajax below.
  $.ajax({
    type: "POST",
    url: "/charge",
    data: formData,
    success: function(){alert("done")},
    dataType: "json",
    contentType: "application/json"
  });
  form.submit();
}

那么您应该能够做到这一点：

app.post('/charge', (req, res) => {
  const amount = req.param('totalAmount');
  ...

---

方法2（命名路由参数） 在这种情况下，您不会向表单中添加隐藏的输入，而是将表单的

操作更新为类似以下内容：

action="/charge/TOTAL_AMOUNT/EMAIL"

然后修改快速路线以引用此值，如：

app.get('/charge/:totalAmount/:email', (req, res) => {
    const amount = req.params.totalAmount;
    const email = req.params.email;
    ...

您能在这里提供更多的上下文吗？在不知道自己实际在做什么或试图做什么的情况下，很难准确地知道如何提供答案。如果可以的话，请分享一些相关的代码。@jonnyAsmar我已经用一些相关的代码更新了我的问题。标记化的_总数来自哪里？噢，对不起。我最初误解了你的想法。在一个地方编辑了，而不是在另一个地方。这只是一个如何使用在其下方创建的路线的示例。我已经做了相应的编辑。好的，我只是先把重点放在让总付款生效上。所以我启动了服务器localhost:5000并输入了Stripe提供的卡值。提交后，它会重新路由并显示“无法发布/收费/总金额”。我对node，尤其是Stripe是相当陌生的。要使用这样的路径，你需要改变你在后端（app.js）处理它的方式<代码>总金额

只是我放在那里的一个占位符。在这种情况下，它实际上应该是值（即

/charge/2500

）。然而，我认为您在这里遇到的阻力最小的方法是使用发布的数据，因为您已经在这样做了。现在您已经提供了用于从前端提交的代码，我将很快用一些更具体的代码更新我的答案。太棒了！你是救命恩人。