Несколько HTML-форм на одной странице с несколькими файлами stripe.js? - PullRequest
0 голосов
/ 23 марта 2019

У меня есть несколько HTML-форм POST на одной странице для Stripe. Проблема в том, что я могу POST только последнюю форму на странице. Если я попытаюсь отправить предыдущие, они не будут работать и приведут к ошибкам (во внешнем интерфейсе) из-за того, что последняя форма на странице не заполняется.

Например, формы на одной странице:

<%= form_for(@order, url: listing_orders_path([@listing, @listing_video]), html: {id: "payment_form"} ) do |form| %>

  <div class="form-group">
    <%= form.label :name, "Your Name" %>
    <%= form.text_field :name, class: "form-control" %>
  </div>
  <%= form.hidden_field :order_type, value: "video" %>
  <script

    src="https://js.stripe.com/v3/">

  </script>
    <div class="form-row">
      <label for="card-element">
        Credit or debit card
      </label>
      <div id="card-element" class="form-control">
      </div>
      <div id="card-errors" role="alert"></div>
    </div>
      <br>
      <div class="form-group">
    <%= form.submit "Create Order"} %>
  </div>
  <span class="token"></span>
  <% end %>

<%= form_for(@order, url: listing_orders_path([@listing, @listing_video]), html: {id: "payment_form-a"} ) do |form| %>

  <div class="form-group">
    <%= form.label :name, "Their Name" %>
    <%= form.text_field :name, class: "form-control" %>
  </div>

  <%= form.hidden_field :order_type, value: "video" %>

  <script

    src="https://js.stripe.com/v3/">

  </script>
        <div class="form-row">
      <label for="card-element-a">
        Credit or debit card
      </label>
      <div id="card-element-a" class="form-control">
      </div>
      <div id="card-errors" role="alert"></div>
    </div>
      <br>
      <div class="form-group">
    <%= form.submit "Create Order" %>
  </div>
  <span class="token"></span>
  <% end %>
<%= javascript_include_tag "stripe" %>
<%= javascript_include_tag "stripe-a" %>

Вот файл stripe.js:

var stripe = Stripe('pk_test_xxxxxxxxxxxx');

var elements = stripe.elements();

var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

var card = elements.create('card', {style: style});

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 = '';
  }
});

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

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

  function stripeTokenHandler(token) {

    var form = document.getElementById('payment_form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    form.submit();
  }

  function addFieldToForm(form, token, field) {
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', "user[card_" + field + "]");
    hiddenInput.setAttribute('value', token.card[field]);
    form.appendChild(hiddenInput);
  }

Файл stripe-a.js такой же, но с payment-form изменено на payment-form-a и card-element изменено на card-element-a.

Я пытался использовать value: "payment_form" внутри кнопки отправки, но он не дифференцировал его (я читал, что это поможет при SO)

У кого-нибудь есть предложения по разрешению использования нескольких форм HTML POST на одной странице и разрешению отправлять только отправляемую форму, а все остальные не вмешиваются?

...