Styjun

I have multiple html POST forms on one page for Stripe.. The issue is I can only POST the last form on the page. If i try submitting the former ones, it will not work and give me errors (on the front-end) due to the last form on the page not being filled out.

Eg forms on single page:

<%= 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" %>

Here is the stripe.js file:

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);
 

The stripe-a.js file is the same but with payment-form changed to payment-form-a and card-element changed to card-element-a.

I tried using a value: "payment_form" within the submit button but it didn't differentiate it (i read this would help on SO)

Anyone have any suggestions on allowing multiple HTML POST forms on the same page and allowing the form that is submitted to submit only, and all of the others not interfere?