时间戳

首页 > 解决方案 > 如何在一页上呈现两次条纹元素形式

ruby-on-rails - 如何在一页上呈现两次条纹元素形式

问题描述

希望有人可以帮助我解决这个问题！我正在尝试在 rails 中实现条带元素，基本上我拥有的是一个 Orders 类，但是签出的人可以选择在两种表格之间进行选择......第一个表格有两个额外的字段选项供他们填写，如果单击此选项。第二个选项在订单表格中少了两个要填写的字段。现在，我将此表单呈现为部分表单，并且我通过将局部字段传递给表单部分来限制是否显示两个条件字段。这一切都很好。什么不起作用，是我的 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>

标签： ruby-on-railsrubyformsstripe-paymentshtml-rendering

解决方案

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

推荐阅读