Проверка формы Bootstrap 4 с проверкой Stripe - PullRequest
Новая
       11

Проверка формы Bootstrap 4 с проверкой Stripe

0 голосов
/ 06 июля 2018

Кто-нибудь знает, как заставить всплывающее окно оплаты Stripe появляться, только если форма Bootstrap 4 действительна?

✓ Код начальной загрузки работает, когда форма недействительна.
? Проблема: я пытался с помощью оператора if если бы 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);


})();

1 Ответ

0 голосов
/ 06 июля 2018

В демонстрационном коде для этого компонента начальной загрузки они запрещают отправку формы только в случае неудачной проверки. В вашем случае вы хотите предотвратить это все время, в противном случае страница будет перенаправлена ​​на другую (или перезагрузит страницу, если вы не указали атрибут действия в форме) после успешного завершения проверки вместо открытия модального окна 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>
...