输入不提交

Question

我正在实现 Stripe 卡 API。

卡的详细信息被发送到 Stripe，Stripe 会生成一个令牌。提交表单时，使用 JavaScript (event.preventDefault()) 阻止表单提交，Stripe 生成令牌，将表单中隐藏输入的值设置为令牌。这通过警告元素的值来确认。然后使用 form.submit() 成功提交表单。

唯一的问题是……隐藏的输入没有被提交，尽管值是在 name 属性旁边设置的，并且表单的方法是 POST。

我不明白这个。是否有任何已知问题？我也尝试过使用 GET，以确保如果它是通过表单（在 URL 中）提交的，我可以看到它。

<form action="https://secure.inquaress.com/checkout/payment/charge" method="POST" id="payment-form" style="line-height: 30px;line-height: 3vmax;">
                    <input id="stripeToken" type="hidden" name="stripeToken" value="" />
                    <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 Element errors. -->
                        <div id="card-errors" role="alert"></div>
                    </div>
                    <button id="card-payment-submit">Submit Payment</button>
                </form> 
                    <script>
                    var stripe = Stripe('pk_test_0uejDjv1y2yiA5ODrlGIv0Nd');
                    var elements = stripe.elements();
                    var style = {
                      base: {
                        // Add your base input styles here. For example:
                        fontSize: '16px',
                        color: "#32325d",
                      }
                    };

                    // 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');
                    card.addEventListener('change', function(event) {
                      var displayError = document.getElementById('card-errors');
                      if (event.error) {
                        displayError.textContent = event.error.message;
                      } else {
                        displayError.textContent = '';
                      }
                    });

                    // Create a token or display an error when the form is submitted.

                    function stripeTokenHandler(token) {
                      // Insert the token ID into the form so it gets submitted to the server
                      document.getElementById('stripeToken').value = token.id;
                      alert(document.getElementById('stripeToken').value);
                      // Submit the form
                      form.submit();
                    }

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

                      stripe.createToken(card).then(function(result) {
                        if (result.error) {
                          // Inform the customer that 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);
                        }
                      });
                    });

                    </script>

Answer 1

好的，这个花了我一点时间。您没有提交表单。您使用了<button id="card-payment-submit">Submit Payment</button>，但此按钮不是<input type="submit" />，也没有任何click 侦听器。所以没有数据发送，点击按钮什么都不做。你永远不会输入form.addEventListener('submit', function(event) { 位。

编辑：我在工作案例中添加了您的代码的最小示例（只需将其复制/粘贴到 test.html 文件中），现在要了解为什么它不在您的页面中...

<form action="https://secure.inquaress.com/checkout/payment/charge" method="GET" id="payment-form" style="line-height: 30px;line-height: 3vmax;">
                    <input id="stripeToken" type="hidden" name="stripeToken" value="test" />
                    <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 Element errors. -->
                        <div id="card-errors" role="alert"></div>
                    </div>
                    <button id="card-payment-submit">Submit Payment</button>
                </form> 
                    <script>

                    // Create a token or display an error when the form is submitted.

                    function stripeTokenHandler(token) {
                      // Insert the token ID into the form so it gets submitted to the server
                      document.getElementById('stripeToken').value = token;
                      alert(document.getElementById('stripeToken').value);
                      // Submit the form
                      form.submit();
                    }

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

                          // Send the token to your server.
                          stripeTokenHandler('test2');
                    });

                    </script>

Answer 2

找到了答案。我已将操作链接设置为 /charge，但实际上我必须指定 /charge/index.php 才能使其工作。