从HTML获取支付金额并在节点中进行收费。js文件

I've looked all over for answers, but haven't found a solution. I'm using Stripe to charge users, however, the payment shouldn't be hardcoded since the pricing changes depending on the variest questions answered. What I'm wanting to do is grab the 'total price' given on the confirmation page (HTML) and charge that amount to Stripe (using Node).

我找遍了所有的答案，但没有找到解决的办法。我正在使用Stripe向用户收费，但是，支付不应该硬编码，因为价格的变化取决于所回答的各种问题。我想要做的是获取确认页面(HTML)上给出的“总价”，并将其收取到Stripe(使用Node)。

I currently have the tokenization working and the charge is successful when the amount is hardcoded, but I need the charge amount to change. Does anyone know if this is possible with Stripe (www.stripe.com)?

我现在有记号化工作，当金额是硬编码的时候收费是成功的，但是我需要费用金额去改变。有人知道Stripe公司(www.stripe.com)是否可以做到这一点吗?

my app.js file (portion):

我的app.js文件(部分):

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

  stripe.customers.create({
    email: "[e-mail]",
    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}`);
});

UPDATE

更新

I also want to update the users' email information from the input form rather than it being hardcoded like it currently is on this line: email: "[e-mail]"

我还想从输入表单中更新用户的电子邮件信息，而不是像现在这样硬编码:email: [e-mail]

Second Update

第二次更新

Stripe form:

条纹形式:

<div class="" style="margin-top: 60px;">
  <h2 class="quote-info">Estimated total&#58; $<span id="new_text"></span> USD</h2>
</div>


   <!-- Payment form -->
   <form action="/charge" method="post" id="payment-form">
      <div class="form-row">
         <label for="card-element">
           Credit or debit card
         </label>
       <div id="card-element">
        <!-- a Stripe Element will be inserted here. -->
       </div>

       <!-- Used to display form errors -->
       <div id="card-errors"></div>
       </div>

        <button>Submit Payment</button>
   </form>

Function found at the bottom of HTML page in a script tag:

在HTML页面底部的脚本标签中找到的函数:

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();
  }

2 个解决方案

#1

You need to retrieve the POST data from the form in Express.

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

---

Method 1 (hidden input)

Path of least resistance based on your current implementation.

基于当前实现的最小阻力路径。

First, you need to make sure the total amount is passed from your form to the backend:

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

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();
}

Then you should be able to do this:

那么你应该能够做到:

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

---

Method 2 (named route param)

In this case, you wouldn't add a hidden input to your form, but instead you would update the action for your form to be something like:

在这种情况下，您不会在表单中添加隐藏的输入，而是将表单的操作更新为:

action="/charge/TOTAL_AMOUNT/EMAIL"

And then modify your Express route to reference this value likeso:

然后修改您的Express route来引用这个值，如:

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

Scotch.io also has a great explanation of handling POST parameters in Express.

苏格兰威士忌。io也对如何在快递中处理POST参数有很好的解释。

#2

What you need to do is communicate from your front-end to your backend and tell the backend to make a stripe charge of a certain amount + certain email. The way to do this is by making a POST request to your node backend from the front end in javascript. Here is what you need to do:

你需要做的是从前端到后端进行通信，并告诉后端对一定数量的条纹收费+一定的电子邮件。实现此目的的方法是使用javascript从前端向节点后端发出POST请求。以下是你需要做的:

• setup a POST endpoint in your server code to receive the post request. Inside the post request you will receive the data indicating the amount to charge and the email and then execute the Strip charge through the code you were previously hardcoding. This guide shows and example of making a POST endpoint.
• 在服务器代码中设置一个POST端点来接收POST请求。在post请求中，您将收到指示要收费金额和电子邮件的数据，然后通过之前硬编码的代码执行条带收费。本指南展示了制作POST端点的示例。
• In your front-end, create a javascript method that runs when the submit button on your form is clicked. In that function, make a post request to the backend at the URL you made in your backend
• 在前端，创建一个javascript方法，该方法在单击表单上的submit按钮时运行。在该函数中，通过在后端中创建的URL向后端发出post请求

This stack overflow answer gives a good quick example of sending data from the frontend to the backend with this method.

这个堆栈溢出的答案给出了一个很好的例子，用这个方法将数据从前端发送到后端。