使用Stripe和Node.js收取自定义金额

Question

我将尽力而为。 所以我想做的是向用户收取所计算的总费用的一定百分比。 我们如何获得总数？ 好吧，总成本取决于用户回答问题的进度。

如果用户需要特定的服务，则成本可能会增加一点，例如100美元，但是我们只想收取不断变化的总费用的10％，如前所述。 目前，金额是硬编码的，但是由于金额会根据他们选择的服务而变化，因此我无法对其进行硬编码。

我是Stripe和Node的新手，但是有一种简单的方法，例如'document.getElementById'？ 类似的东西？ 充电和一切正常工作，但我相信我对路由感到困惑。

我的HTML表单（显示总计的区域）：

<div class="" style="margin-top: 60px;">
   <h2 class="quote-info">Estimated total&#58; $<span id="new_text"></span> USD</h2>
   <h2 class="quote-info">Reservation deposit&#58; $<span id="new_text2"></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>
       <input type="hidden" name="totalAmount" value="1000">
       <button>Submit Payment</button>
     </form>

我的脚本标签位于包含上述形式的HTML文件的底部：

<script type="text/javascript">
  //Create a Stripe client
  var stripe = Stripe('my_key_should_go_here');

  // Create an instance of Elements
  var elements = stripe.elements();

  // Custom styling can be passed to options when creating an Element.
  // (Note that this demo uses a wider set of styles than the guide below.)
  var style = {
    base: {
      color: '#32325d',
      lineHeight: '24px',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };

  // Create an instance of the card Element
  var card = elements.create('card', {style: style});

  // Add an instance of the card Element into the `card-element` <div>
  card.mount('#card-element');

  // Handle real-time validation errors from the card Element.
  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // Handle form submission
  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the user if there was an error
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server
        stripeTokenHandler(result.token);
      }
    });
  });

  function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    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"
    });

    // alert("Created a token with value: "+token.id)
    form.submit();
  }
  </script>

最后，我的app.js文件：

const express = require('express');
const stripe = require('stripe')('deleted_key');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());

// Set Static Folder
app.use(express.static('public'));

// Index route
app.get('/charge', (req, res) => {
  res.send();
});

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

  stripe.customers.create({
    email: "random@gmail.com",
    source: req.body.mytoken
  })
  .then(customer =>  {
    stripe.charges.create({
    amount,
    description:'specified service description here',
    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}`);
});

我的主要问题是，我将如何获取HTML文件中“ new_text”区域中给定的金额以使用节点中的用户并向其收费？

Answer 1

要使用getElementById ，首先要向您的金额字段添加一个ID：

<input type="hidden" name="totalAmount" id="totalAmount" value="1000">

然后，您可以使用ID来获取字段的值：

const amount = document.getElementById("totalAmount").value;

虽然，我可以看到您的输入类型是隐藏的-这是故意的吗？