Кнопки оплаты с несколькими полосами на одной странице приложения rails 4

Я создаю страницу оплаты, на которой перечислены три различных варианта подписки, и использую кассу Stripe для управления платежами.

Страница отображается правильно, и все 3 варианта подписки имеют кнопку «купить сейчас», которая должна быть связана с Stripe.

Моя проблема в том, что первая кнопка - единственная, которая правильно запускает процесс проверки Stripe. Кнопки 2 и 3 вызывают следующую ошибку:

Неизвестное действие Не удалось найти действие index для 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 кнопок работает правильно?

Спасибо!


person dmt2989    schedule 04.02.2014    source источник


Ответы (4)


Вы можете заставить его работать, имея уникальные идентификаторы кнопок, например

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

но есть еще одна проблема с полосой js. Если вы выполните StripeCheckout.configure несколько раз, он создаст несколько фреймов с одинаковым атрибутом имени. К сожалению, это означает, что все, что ваш покупатель пытается купить, он всегда будет продавать последним, что вы вставили, даже если во всплывающем окне с полосками было написано, что он продает им что-то еще.

Мы использовали это решение: одна форма и динамическая вставка цены и времени:

<%= 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 %>
person nruth    schedule 01.06.2014

Я знаю, что это устарело, но я решил эту проблему, изменив имя переменных-обработчиков (каждая из которых должна иметь другое имя) вместо изменения идентификатора HTML.

person Jordan Roberts    schedule 15.09.2016

Я недавно столкнулся с этой проблемой и хотел оставить альтернативное решение. В нашем приложении у нас есть две кнопки на странице с помощью stripe.js: «Купить товар» или «Профессиональная подписка». Этот метод использует 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. 
      }
  });
});
person JeffD23    schedule 22.04.2015

person    schedule
comment
Ты получил это! Я изменил его, чтобы найти класс (vs ID), и проблема была решена. Спасибо за помощь. - person dmt2989; 22.02.2014
comment
Спасибо. Только увидев ответ, я решил такую ​​же ошибку. - person logesh; 14.03.2014
comment
Сталкивались ли вы с проблемами, связанными с тем, что все созданные фреймы iframe имеют одно и то же имя, и поэтому клиенты всегда выбирают один и тот же продукт (даже если они думают, что купили другой)? - person nruth; 01.06.2014