时间戳

首页 > 解决方案 > 使用 Stripe 结帐的 Bootstrap 4 表单验证

javascript - 使用 Stripe 结帐的 Bootstrap 4 表单验证

问题描述

有谁知道如何让 Stripe 付款弹出窗口仅在 Bootstrap 4 表单有效时出现？

✓ 表单无效时，引导代码有效。
问题：我尝试使用 'if else' 语句让 Stripe 在表单有效但没有任何反应时出现 :(

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form[0].checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        } else {
          var handler = StripeCheckout.configure({
            key: 'pk_test_zef7efzhke73gefezzzhgu3',
            image: 'https://stripe.com/img/documentation/checkout/marketplace.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.
            }
          });
          // Open Checkout with further options:
          handler.open({
            name: 'Test',
            description: '2 widgets',
            currency: 'eur',
            amount: 2000
          });

          // Close Checkout on page navigation:
          window.addEventListener('popstate', function() {
            handler.close();
          });



        }
        form.classList.add('was-validated');


      }, false);
    });

  }, false);


})();

标签： javascriptbootstrap-4stripe-payments

解决方案

在此引导组件的演示代码中，它们仅在验证失败时阻止提交表单。在您的情况下，您希望一直阻止它，否则一旦验证成功，页面将重定向到另一个页面（或者如果您没有在表单上放置操作属性，则重新加载页面）而不是打开 Checkout 模式。

最简单的方法是在 if 语句之前移动以下内容：

event.preventDefault();
event.stopPropagation();

与您的问题无关，但您可能希望将StripeCheckout.configure(...)部分移到验证逻辑之外，以便在页面加载时仅实例化 Checkout 一次。

作为参考，这是我用来使其工作的完整代码段，但您仍然需要在token: function(token) {...}回调中添加一些代码，以便在一切完成后将令牌发送到您的后端：

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  var handler = StripeCheckout.configure({
      key: 'pk_test_g6do5S237ekq10r65BnxO6S0',
      image: 'https://stripe.com/img/documentation/checkout/marketplace.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.
      }
  });
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        event.stopPropagation();
        if (form.checkValidity() === false) {
          // Custom behavior when Validation fails
        } else {
          // Open Checkout with further options:
          handler.open({
              name: 'Test',
              description: '2 widgets',
              currency: 'eur',
              amount: 2000
          });
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

推荐阅读