Question

我正在尝试设置条带以从HTML表单中获取动态付款金额。此表单位于checkout.html页面上，如下所示：

<html>
    <header>
        <title>checkout</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://checkout.stripe.com/checkout.js"></script>
    </header>

    <body>

        <form id="myForm" action="/charge" method="post">
            <input type="hidden" id="stripeToken" name="stripeToken" />
            <input type="hidden" id="stripeEmail" name="stripeEmail" />

            <input type="text" id="item1price" value="253">
            <input type="text" id="item2price" value="167">

            <button id="customButton">Purchase</button>

            <script>

                  //change secret key later!
                  var handler = StripeCheckout.configure({
                  key: 'pk_test',
                  image: 'img/stripe.png',
                  locale: 'auto',
                  token: function(token) {
                    // You can access the token ID with `token.id`.
                    // Get the token ID to your server-side code for use.
                    $("#stripeToken").val(token.id);
                    $("#stripeEmail").val(token.email);

                    $("#myForm").submit();
                  }
                });

            document.getElementById('customButton').addEventListener('click', function(e) {

                //add up each price in array to get total cost
                var total = 100;
                // ...

                //insert total variable into hidden html text field
                function insertText(){
                    document.getElementById('chargeAmount').value = total;
                }
                insertText();

              // Open Checkout with further options:
              handler.open({
                name: 'test company',
                description: "test desc",
                amount: total * 100
              });
              e.preventDefault();
            });

            // Close Checkout on page navigation:
            window.addEventListener('popstate', function() {
              handler.close();
            });
            </script>
            <input type="hidden" id="chargeAmount" name="chargeAmount" />
        </form>
    </body>
</html>

我的server.js中也有这个代码：

app.get('/pay', function (req, res) {
  res.sendFile( __dirname + "/checkout.html" );
});

app.get('/paysuccess', function (req, res) {
  res.sendFile( __dirname + "/paySuccess.html" );
});

app.post('/charge', function (req, res) {
  var token = req.body.stripeToken;
  console.log(token);
  var chargeAmount = req.body.chargeAmount;
  console.log(chargeAmount);
  var charge = stripe.charges.create({
      amount: chargeAmount,
      currency: "usd",
      source: token
  }, function(err, charge){
      if(err & err.type ==="StripeCardError"){
          console.log("your card was declined.");
      }
  });  
    res.redirect('/paysuccess');
})

当我浏览localhost / pay时，checkout.html会显示出来。我输入价格框中的信息，我有我的代码将表格中输入的价格相加并返回总数，输入测试支付卡信息，然后它将我带到/ paysuccess页面。但控制台说，chargeAmount和stripeToken都是未定义的。我让他们登录/充电功能。我拿出了一些我认为不相关的专有代码，但是当我用req.body.stripeToken和req.body.chargeAmount调用stripeToken和chargeAmount时，是否可以在我的代码中看到为什么stripeToken和chargeAmount未定义？感谢。

编辑 - 我取消了所有的html表单，看看他们的价值观是什么。在页面加载时，stripeToken和stripeEmail值为空，但在使用测试卡完成测试付款后，它们将被填充。我相信我的错误在于它获取html表单的值。我看到这篇文章：https://stackoverflow.com/questions/41712850/stripe-js-resolve-cannot-read-property-stripetoken-of-undefined?rq=1并将答案添加到我的代码中。它似乎工作，但现在我遇到一个错误，说错误是空的。

if(err & err.type ==="StripeCardError"){
                  ^

TypeError: Cannot read property 'type' of null

有问题的行位于我的server.js上的/ charge函数中。

Answer 1

stripe.charges.create是异步的，因此在获得chargeToken值之前，您需要点击res.redirect。你也没有在你的回复中把它传回来，所以我不确定你希望从哪里拉回来。

在结帐页面

1 个答案: