Question

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

页面正常呈现，所有3个订阅选项都有“立即购买”按钮，该按钮应链接到条纹。

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

未知行动 ChargesController

找不到操作'index'

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

  <% @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来实现它，例如

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

但是条纹js还有另一个问题。如果多次执行StripeCheckout.configure，它将创建具有相同name属性的多个iframe。不幸的是，这意味着无论您的客户想要购买什么产品，它们总会在您插入的最后一件商品中出售，即使条纹弹出窗口表示它正在销售其他东西。

我们使用此解决方案：一种形式，并动态插入价格和时间：

<%= form_tag charges_path, id: 'stripe-payment-form' do %>
  <%= hidden_field_tag 'amount', nil, id: 'payment_amount' %>
  <%= hidden_field_tag 'name', nil, id: 'payment_name' %>
  <%= hidden_field_tag 'days', nil, id: 'payment_days'  %>

  <% Pricing.all.each do |pricing| %>
    <p>
      <button id="<%= dom_id(pricing, 'btn') %>">
        Buy <%= pricing.name %> for <%= number_to_currency(pricing.pounds, unit: '£') %>
      </button>
    </p>
  <% end %>

  <%= javascript_tag do %>
    var handler = StripeCheckout.configure({
      key: "<%= Rails.configuration.stripe[:publishable_key] %>",
      image: "<%= image_path('/images/apple-icons/apple-touch-icon-144x144-precomposed.png') %>",
      token: function(token, args) {
        var form = $('#stripe-payment-form');
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
        form.append($('<input type="hidden" name="stripeToken" />').val(token.id));
        form.submit();
      }
    });

    <% Pricing.all.each do |pricing| %>
      document.getElementById('<%= dom_id(pricing, 'btn') %>').addEventListener('click', function(e) {
        e.preventDefault();
        var form = $('#stripe-payment-form');
        // set the price etc for the button clicked
        $('#payment_amount').val("<%= pricing.pence %>");
        $('#payment_name').val("<%= pricing.name %>");
        $('#payment_days').val("<%= pricing.days %>");
        // Open Checkout with further options
        handler.open({
          name: 'Company name',
          currency: 'GBP',
          description: '<%= pricing.name %>',
          amount: '<%= pricing.pence %>',
          email: '<%= member.email %>',
        });
      });
    <% end %>
  <% end %>
<% end %>

Answer 2

我最近在自己的应用中遇到了同样的问题。

所有三个按钮都具有相同的ID。

Answer 3

我知道这已经过时了，但我通过更改处理程序变量的名称来解决了这个问题（每个变量都应该有不同的名称），而不是更改HTML ID。

Answer 4

我最近遇到了这个问题，并想留下另一种解决方案。在我们的应用程序中，我们使用stripe.js在页面上有两个按钮：＆＃34;购买项目＆＃34;或者＆＃34; Pro Subscription＆＃34;。当单击第一个按钮时，此方法使用jQuery从DOM中删除第二个按钮。如果用户取消付款，则该按钮将呈现回DOM。这就是处理程序的外观：

$('#firstButton').on('click', function() {
  $('#secondButton').html(""); // Remove the second stripe script from the dom

  handler.open({
    // handler stuff
    closed: function(){
      $('#secondButton').html('<%= j render partial: "second_button" %>'); // Renders button back to the DOM if payment is cancelled. 
      }
  });
});

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

4 个答案: