Question

使用Rails项目，该项目允许用户注册然后选择通过Stripe处理的订阅。

所以它是如何运作的是他们创建一个帐户（使用Devise），然后将它们路由到一个页面，在那里他们可以选择相同形式的免费计划或高级计划。

我想要完成的是：如果他们选择免费计划，当他们点击提交时不需要信用卡信息（我在Stripe中没有'免费'计划，所以我不这样做需要担心这种互动。）

如果他们选择了高级计划，我希望应用知道他们必须输入信用卡信息，否则它将无法通过。

我跟踪了Ryan Bates关于这个主题的Railscast，并修改了他的代码以适应我的情况。我相信答案是改变CoffeeScript表格，但我的技能有点生疏。我尝试了几种不同的解决方案，但无法让它发挥作用。如果有人能让我知道如何以这种方式组织逻辑，那就很好奇。

以下文件中的当前结果只允许我创建免费订阅，如果我先选择并点击提交。如果我选择高级按钮然后切换回来，它就不起作用。

我的coffeescript表格在subscriptions.js.coffee中：

jQuery ->
  $('#plan_id_2').change ->
    if $(this).is(':checked')
      Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
      subscription.setupForm()
    else
      true

 subscription =
   setupForm: ->
     $('#new_subscription').submit ->
       $('input[type=submit]').prop('disabled', true)
       subscription.processCard()
       false

   processCard: ->
     card =
       number: $('#card_number').val()
       cvc: $('#card_code').val()
       expMonth: $('#card_month').val()
       expYear: $('#card_year').val()

     Stripe.createToken(card, subscription.handleStripeResponse)

   handleStripeResponse: (status, response) ->
     if status == 200
       $('#subscription_stripe_card_token').val(response.id)
       $('#new_subscription')[0].submit()
     else
       $('#stripe_error').text(response.error.message)
       $('input[type=submit]').prop('disabled', false)

我的订阅表单

<h1>Select a plan</h1>

<div class="row">
<%= form_for @subscription, url: user_subscriptions_path, method: :post, html: { class: 'form-horizontal' } do %>
<div class="col-sm-4">
  <div class="form-group">
    <%= label_tag "Free" %>
    <%= radio_button_tag :plan_id, @free_plan.id, false %>
  </div>
</div>

  <div class="col-sm-4">
    <div class="form-group">
      <%= label_tag "Premium" %>
      <%= radio_button_tag :plan_id, @premium_plan.id, false %>
    </div>
    <div id="premium-form">
      <%= hidden_field_tag :stripe_card_token %>
        <div class="form-group">
          <%= label_tag :card_number, "Credit Card Number" %>
          <%= text_field_tag :card_number, nil, name: nil %>
        </div>
        <div class="form-group">
          <%= label_tag :card_code, "Security Code on Card (CVV)" %>
          <%= text_field_tag :card_code, nil, name: nil %>
        </div>
        <div class="form-group">
          <%= label_tag :card_month, "Card Expiration" %>
          <%= select_month nil, {add_month_numbers_true: true}, {name: nil, id: "card_month"}%>
          <%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year"}%>
        </div>
        <div id="stripe_error">
          <noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
        </div>
      </div>
    </div>
    <div class="row">
      <%= submit_tag 'Choose Plan' %>
    </div>
  <% end %>
</div>

Answer 1

我在同一情况下所做的是当用户选择不需要信用卡信息的选项时，在我的表单上调用.off（）。如果他们随后选择了需要信用卡信息的选项，则可以再次调用setupForm。我不知道Coffeescript，但这是一般的想法：

$('#whateveryourfeeplanselectoris').change ->
  if $(this).is(':checked')
    $('#form-selector').off();
    // you could also hide the credit card entry here as well
  else
    subscription.setupForm()
    // unhide credit card entry if you hide it above

订阅选择表单中的不同选项

1 个答案: