How do I render stripe elements form twice on one page - ruby-on-rails

Question

Hopefully someone can help me out with this! I am trying to implement stripe elements in rails and basically what I have is an Orders class, but the person checking out has the option to choose between two forms... the first form has two additional field options for them to fill out if the click this option. The second option has two less fields to fill out in the order form. Right now I am rendering this form as a partial and I am restricting whether or not the two conditional fields are shown by passing a local to the form partial. This is all working great. What is NOT working, is that my Stripe elements tag is rendering fine on the first form render, but it never renders in a functional state or with any css styles on the second form. The stripe_elements_tag in the second rendered version of the tag is totally useless. Can anyone think of a better way to do this or a fix that might work? I tried hiding the content in the divs and displaying it with an on click, show the form, but this also did not work. The second form would never be shown ( i noticed this option also made the form animations slower :( .
At this point I am considering actually just writing two separate forms even though thats not very DRY just to see if it will work that way.
Any ideas or thoughts are very much welcomed!
Have a great day everyone!
here is my new.html.erb code
<%= stripe_javascript_tag %>
<div class="container">
<div class="mx-auto" width="400px">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Referred By Group
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<%= render "order_form", locals: { buy_method: "group" } %>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Purchasing Independently
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<%= render "order_form", locals: { buy_method: "individual" } %>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6" id="flash-message">
<%= render partial: 'flash' %>
<% #order.errors.full_messages.each do |msg| %>
<li> * <%= msg %> </li>
<% puts msg %>
<% end %>
</div>
<div class="row">
<div class="col-md-9 mb-md-0 mb-5">
<%= form_for #order do |f| %>
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :customer_name, "Your Name *" %><br />
<%= f.text_field :customer_name, class: "form-control" %>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :email, "Email *" %><br />
<%= f.text_field :email, class: "form-control" %>
</div>
</div>
</div>
<% if locals[:buy_method] == "group"%>
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :student_name, "Student Name *" %><br />
<%= f.text_field :student_name, class: "form-control" %>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :school_name, "School or Group Name *" %><br />
<%= f.text_field :school_name, class: "form-control"%>
</div>
</div>
</div>
<% end %>
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :street_address, "Street Address *" %><br />
<%= f.text_field :street_address, class: "form-control" %>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :number_books, "Number of books to purchase *" %><br />
<%= f.select :number_books, (0..99), class: "form-control", selected: 0%>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :city, "City *" %><br />
<%= f.text_field :city, class: "form-control" %>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :state, "State *" %><br />
<%= f.select :state, [ "--",'AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FM', 'FL', 'GA', 'GU', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'MP', 'OH', 'OK', 'OR', 'PW', 'PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VI', 'VA', 'WA', 'WV', 'WI', 'WY' ], class: "form-control"%>
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-0">
<%= f.label :zip_code, "Zip code *" %><br />
<%= f.text_field :zip_code, class: "form-control" %>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<%= f.check_box :email_permission, checked: "checked", checked_value: true, unchecked_value: false %>
<%= f.label :email_permission, class: "checkbox-inline" %>
</div>
</div>
</div>
<div class="form-group">
<label for="card-element">Credit or debit card *</label>
<div id="card-element" class="form-control" >
<%= stripe_elements_tag submit_path: contact_index_path %>
</div>
</div>
<div class="form-group">
<%= f.label :total %>
<%= f.label :total, id: "total", value: "$#{ #order.total }" %>
</div>
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
</div>
<% end %>
</div>
</div>

Answer 1

You need to create two separate Instances of the card referencing your stripe api_key two separate times. You cannot create two elements using the same instantiation of your stripe api key.