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文件中），现在就可以了解它为什么不在您的页面中...... < / p>

<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才能使其正常工作。

输入不提交

2 个答案: