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

该页面呈现正确,并且所有3个订阅选项均具有“立即购买”按钮,该按钮应链接到Stripe。

我的问题是,第一个按钮是唯一正确拉起Stripe check out 流程的按钮。按钮2和3引发以下错误:

未知 Action
找不到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 %>

关于为什么三个按钮中只有一个可以正常工作的想法?

谢谢!

最佳答案

您可以通过具有唯一的按钮ID(例如,

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

但是还有另一个问题,与条纹js。如果您多次执行StripeCheckout.configure,它将创建具有相同name属性的多个iframe。不幸的是,这意味着无论您的客户想要购买什么,即使 strip 弹出窗口说要卖给他们其他东西,也总是会卖掉您插入的最后一件东西。

我们使用以下解决方案:一种形式,并动态插入价格和时间:
<%= 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 %>

10-05 20:57
查看更多