如何显示多个条纹元素答案

【问题标题】：How to display multiple Stripe Elements如何显示多个条纹元素
【发布时间】：2020-01-28 20:51:22
【问题描述】：

我正在尝试构建用户可以使用 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 %>

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

【问题讨论】：

我做过类似的事情，需要在一页上使用多个条带元素，但这不是计划，但您也许可以实现类似的东西。我所做的是使用一个 onclick 函数，该函数将显示带有动态变量的正确元素形式。或者您可以让某人选择一个计划并将该信息传递到下一页并使用一种付款表格......使用onclick可能不是最好的，但我并不完全精通javscript，所以我使用的方法是很可能不是搬家

标签： javascript ruby-on-rails stripe-payments

【解决方案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);
});

【讨论】：