如何显示多个条纹元素

Question

我正在尝试让用户可以使用 Stripe Element 输入信用卡信息。 在这个页面上，我有三个计划。 用户选择计划后会在计划模式中输入信用卡信息。

问题不是在后两种模式上显示payment-form 。 实际上，第一个模式显示display-form 。 我已从getElementById更新为getElementClassName ，但这不起作用。

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

应用程序/资产/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

我已经完成了 Bootstrap 模态。

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