如何在一页上渲染条纹元素两次

Question

希望有人能帮我解决这个问题！我正在尝试在 rails 中实现条带元素，基本上我拥有的是一个订单 class，但是签出的人可以选择在两种形式之间进行选择...第一种形式有两个附加字段如果单击此选项，他们可以填写的选项。第二个选项在订购单中少填写了两个字段。现在，我将此表单呈现为部分表单，并且通过将局部表单传递给部分表单来限制是否显示这两个条件字段。这一切都很好。不起作用的是，我的 Stripe 元素标记在第一个表单呈现器上呈现良好，但它从不以功能状态呈现或在第二个表单上使用任何 css 样式呈现。标签的第二个呈现版本中的 stripe_elements_tag 完全没用。谁能想到更好的方法或可能有效的修复方法？我尝试将内容隐藏在 div 中并通过单击显示它，显示表单，但这也没有用。第二种形式永远不会显示（我注意到这个选项也使形式动画变慢:( .

在这一点上，我正在考虑实际上只写两个单独的表格，即使那不是很干只是为了看看它是否会那样工作。

非常欢迎任何想法或想法！祝大家有个愉快的一天！

这是我的 new.html.erb 代码

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

您需要创建两个单独的卡片实例来引用您的条纹 api_key 两次。您不能使用条带 api 键的相同实例创建两个元素。

如何在一页上渲染条纹元素两次

How do I render stripe elements form twice on one page

ruby

forms

ruby-on-rails

html-rendering

stripe-payments