rails 4 app的一页上有多个条纹支付按钮

Question

我正在构建一个付款页面,列出三种不同的订阅选项,并使用Stripe的结帐来管理付款.

页面正确呈现,并且所有3个订阅选项都具有应该链接到Stripe的"立即购买"按钮.

我的问题是第一个按钮是唯一一个正确拉起Stripe结帐流程的按钮.按钮2和3抛出以下错误:

未知操作无法为ChargesController找到操作"索引"

我的付款页面的相关部分是:

  <% @plans.each do |plan| %>
    <li class="col-md-3 plan <%= 'plan-primary' if plan.highlight? %>">
      <div class="img-thumbnail">
        <div class="caption">
          <h3><%= plan.name %></h3>
          <h4><%= plan_price(plan) %></h4>
          <div class="call-to-action">
            <% if @subscription.nil? %>
             <% if plan.highlight? %>

              <%= form_tag main_app.charges_path do %>
                <script src="https://checkout.stripe.com/checkout.js"></script>

                  <button id="customButton" class="btn btn-success">Buy Now</button>

                  <script>
                    var handler = StripeCheckout.configure({
                      key: '<%= 'pk_test_my_pk' %>',
                      image: '/assets/my_logo.png',
                      token: function(response) {
                        var tokenInput = $("<input type=hidden name=stripeToken />").val(response.id);
                        var emailInput = $("<input type=hidden name=stripeEmail />").val(response.email);
                        $("form").append(tokenInput).append(emailInput).submit();
                      }
                    });

                    document.getElementById('customButton').addEventListener('click', function(e) {
                      handler.open({
                        name: 'My Co',
                        description: 'Listing subsctiption ($50.00)',
                        amount: 50*100,
                        shippingAddress: false
                      });
                      e.preventDefault();
                    });
                  </script>
              <% end %>

              <% else %>
               <%= form_tag main_app.charges_path do %>
                <script src="https://checkout.stripe.com/checkout.js"></script>

                  <button id="customButton" class="btn btn-large btn-primary">Buy Now</button>

                  <script>
                    var handler = StripeCheckout.configure({
                      key: '<%= 'pk_test_my_pk' %>',
                      image: '/assets/my_logo.png',
                      token: function(response) {
                        var tokenInput = $("<input type=hidden name=stripeToken />").val(response.id);
                        var emailInput = $("<input type=hidden name=stripeEmail />").val(response.email);
                        $("form").append(tokenInput).append(emailInput).submit();
                      }
                    });

                    document.getElementById('customButton').addEventListener('click', function(e) {
                      // Open Checkout with further options
                      handler.open({
                        name: 'My Co',
                        description: 'Listing subsctiption ($40.00)',
                        amount: 40*100,
                        shippingAddress: false
                      });
                      e.preventDefault();
                    });
                  </script>
              <% end %>


            <% end %>

想法为什么只有3个按钮中的一个正常工作？

谢谢!

Answer 1

您可以通过具有唯一的按钮 ID 来使其看起来正常工作，例如

\n\n

<button id="<%= dom_id(pricing, \'btn\') %>\n

\n\n

但是还有另一个问题，就是stripe js。如果多次执行 StripeCheckout.configure ，它将创建多个具有相同名称属性的 iframe。不幸的是，这意味着无论您的客户尝试购买什么，他们总是会被出售您最后插入的东西，即使条纹弹出窗口说它正在向他们出售其他东西。

\n\n

我们使用了这个解决方案：一种表单，并动态插入价格和时间：

\n\n

<%= form_tag charges_path, id: \'stripe-payment-form\' do %>\n  <%= hidden_field_tag \'amount\', nil, id: \'payment_amount\' %>\n  <%= hidden_field_tag \'name\', nil, id: \'payment_name\' %>\n  <%= hidden_field_tag \'days\', nil, id: \'payment_days\'  %>\n\n  <% Pricing.all.each do |pricing| %>\n    <p>\n      <button id="<%= dom_id(pricing, \'btn\') %>">\n        Buy <%= pricing.name %> for <%= number_to_currency(pricing.pounds, unit: \'\xc2\xa3\') %>\n      </button>\n    </p>\n  <% end %>\n\n  <%= javascript_tag do %>\n    var handler = StripeCheckout.configure({\n      key: "<%= Rails.configuration.stripe[:publishable_key] %>",\n      image: "<%= image_path(\'/images/apple-icons/apple-touch-icon-144x144-precomposed.png\') %>",\n      token: function(token, args) {\n        var form = $(\'#stripe-payment-form\');\n        // Use the token to create the charge with a server-side script.\n        // You can access the token ID with `token.id`\n        form.append($(\'<input type="hidden" name="stripeToken" />\').val(token.id));\n        form.submit();\n      }\n    });\n\n    <% Pricing.all.each do |pricing| %>\n      document.getElementById(\'<%= dom_id(pricing, \'btn\') %>\').addEventListener(\'click\', function(e) {\n        e.preventDefault();\n        var form = $(\'#stripe-payment-form\');\n        // set the price etc for the button clicked\n        $(\'#payment_amount\').val("<%= pricing.pence %>");\n        $(\'#payment_name\').val("<%= pricing.name %>");\n        $(\'#payment_days\').val("<%= pricing.days %>");\n        // Open Checkout with further options\n        handler.open({\n          name: \'Company name\',\n          currency: \'GBP\',\n          description: \'<%= pricing.name %>\',\n          amount: \'<%= pricing.pence %>\',\n          email: \'<%= member.email %>\',\n        });\n      });\n    <% end %>\n  <% end %>\n<% end %>\n

\n