How to display multiple Stripe Elements

Question

I'm trying to build that users can input credit card information with Stripe Element. On this page, I have three plans. The users would enter credit card information on plan modal after choosing the plan.

The issue is not to display payment-form on the latter 2 modals. Actually, the first modal displays display-form . I have updated from getElementById to getElementClassName but that would not work.

app/views/payment/index.html.erb

<% @plan.each do |plan| %>
  <div
    class="modal fade"
    id="payModal-<%= plan.id %>"
    tabindex="-1"
    role="dialog"
    aria-labelledby="payModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content checkoutPlan">
        <h2>Subscribe to <%= plan.name %> plan!</h2>
        <div class="price">
          <h4>$<%= plan.amount / 100 %>/mo</h4>
          <p>Billed Monthly</p>
        </div>
        <%= form_tag(subscriptions_path, method: 'post', id: 'payment-form') do %>
          <div class="stripe">
            <%= hidden_field_tag 'plan_id', plan.id %>
            <form action="/charge" method="post">
              <div class="form-row">
                <label for="card-element-<%= plan.id %>">
                  Enter your payment details security <i class="fas fa-lock"></i>
                </label>
                <div id="card-element-<%= plan.id %>">
                  <!-- A Stripe Element will be inserted here. -->
                </div>

                <!-- Used to display form errors. -->
                <div id="card-errors" role="alert"></div>
              </div>

              <button>Submit Payment</button>
            </form>
          </div>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

app/assets/javascript/stripe.js

// Create an instance of the card Element.
var card = elements.create("card", { style: style });

// Add an instance of the card Element into the `card-element` <div>.
card.mount("[id^=card-element-]");

// Handle real-time validation errors from the card Element.
card.addEventListener("change", function(event) {
var displayError = document.getElementById("card-errors");
if (event.error) {
    displayError.textContent = event.error.message;
} else {
    displayError.textContent = "";
}
});

Answer 1

I've done with Bootstrap modal.

_plan.html.erb

  <a href="#"
    data-toggle="modal"
    data-target="#payModal"
    data-plan_id="<%= plan.id %>"
    data-plan_name="<%= plan.name %>"
    data-plan_amount="<%= plan.amount %>"
  >
    <div class="btn">
      <span>Choose Plan</span>
    </div>
  </a>

main.js

$("#payModal").on("show.bs.modal", function(event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var plan_name = button.data("plan_name"); // Extract info from data-* attributes
  var plan_amount = button.data("plan_amount"); // Extract info from data-* attributes
  var plan_id = button.data("plan_id"); // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this);
  modal.find(".modal-content h2").text("Subscribe to " + plan_name + "plan!");
  modal.find(".modal-content .price h4").text("$" + plan_amount / 100 + "/mo");
  modal.find(".plan-id input").val(plan_id);
});