Почему мой Navbar мешает созданию токена Stripe? - PullRequest
Новая
       7

Почему мой Navbar мешает созданию токена Stripe?

0 голосов
/ 24 декабря 2018

Проблема: Моя навигационная панель, которая работает на javascript, каким-то образом мешает созданию моего токена Stripe.

Все хорошо, когда добавляется идентификатор учетной записи Stripe, но затем я присоединяюсьбанковский счет (внешний счет) к идентификатору счета, он не работает.Затем я понял, что когда я заберу свой код Navbar, он будет работать ...

Что в этом коде мешает?:

Код Navbar:

<nav class="navbar navbar-expand navbar-dark fixed-top nav-color"> <a href="#menu-toggle" id="menu-toggle" class="navbar-brand"><span class="navbar-toggler-icon"></span></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <div class="collapse navbar-collapse" id="navbarsExample02">
                <div class="navbar-header navbar-center">
                    <a class="navbar-brand center" id="navbar-center" href="/">Dashboard</a>
                </div>
                <ul class="navbar-nav mr-auto ">
                    <!-- <li class="nav-item active"> <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a> </li> -->
                </ul>
                <ul class="navbar-nav navbar-right dashboard-signout">

                <% if user_signed_in? || affiliate_signed_in? %>
                  <li class="nav-remove-1"><%= link_to "Sign Out", destroy_user_session_path, method: :delete, class: "dashboard-signout" %>
                  </li>
                <% end %>
                </ul>
                <form class="form-inline my-2 my-md-0"> </form>
            </div>
        </nav>

Вот javascript для него: 

$(function(){
           $("#menu-toggle").click(function(e) {
               e.preventDefault();
               $("#wrapper").toggleClass("toggled");
           });




           $(window).resize(function(e) {
             if($(window).width()<=992){
               $("#wrapper").removeClass("toggled");
             }else{
               $("#wrapper").addClass("toggled");
             }
           });
         });

С ним это не будет работать, без него это работает.

Вот краткая форма полосы: 

<form action="/bank_accounts" method="POST" id="payment-form-1">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-custom">Submit</button>
       <div class="outcome">
       <div class="error"></div>
       <div class="success">
                                        Success! Your Stripe token is <span class="token"></span>
       </div>
       </div>
</form>

Javascript для формы счета банка полосы: 

  var stripe = Stripe('pk_test_123456789');

  function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    var form = document.querySelector('form');
    form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    form.submit();

  } else {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();

  var bankAccountParams = {
    country: document.getElementById('country').value,
    currency: document.getElementById('currency').value,
    account_number: document.getElementById('account-number').value,
    account_holder_name: document.getElementById('account-holder-name').value,
    account_holder_type: document.getElementById('account-holder-type').value,
  }
  if (document.getElementById('routing-number').value != '') {
    bankAccountParams['routing_number'] = document.getElementById('routing-number').value;
  }

  stripe.createToken('bank_account', bankAccountParams).then(setOutcome);
});

AreВы видите что-нибудь, что может привести к тому, что токен не будет создан?Здесь должно быть какое-то вмешательство.

С navbar токен не создается.Без него все работает нормально.

Кроме того, это только когда я убираю HTML-код.(если это имеет значение)

1 Ответ

0 голосов
/ 24 декабря 2018

Ваш блок <nav> ... </nav> содержит элемент <form>, и когда вы используете document.querySelector('form') для привязки прослушивателя событий, он связывается с этой формой в вашей навигации вместо элемента Stripe <form>.

querySelector () возвращает первый элемент в документе, который соответствует указанному селектору

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Вместо этого вы можете попытаться получить платежную форму по идентификатору,например:

document.getElementById ('payment-form-1'). addEventListener ('submit', function (e) {...});

...