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

Different options in subscription selection form

本文关键字:选项 选择 表单      更新时间:2024-05-01

处理一个Rails项目,该项目允许用户注册并选择订阅,该订阅通过Stripe处理。

因此,它的工作原理是他们创建一个帐户(使用Devise),然后将他们路由到一个页面,在那里他们可以选择相同形式的免费计划或高级计划。

我试图实现的是:如果他们选择免费计划,当他们点击提交时,不需要信用卡信息(我在Stripe中没有"免费"计划,所以我不需要担心这种互动)。

如果他们选择了高级计划,我想让应用程序知道他们必须输入信用卡信息,否则就无法通过。

我在这个问题上遵循了Ryan Bates的Railscast,并修改了他的代码以适应我的情况。我相信答案是改变CoffeeScript的形式,但我在这里的技能有点生疏。我尝试了几种不同的解决方案,但都无法实现。很好奇是否有人能让我知道如何以这种方式组织逻辑来实现这一点。

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

我在订阅中的咖啡脚本表单。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>

在同样的情况下,当用户选择了一个不需要信用卡信息的选项时,我在表单上调用了.off()。如果他们选择了一个需要信用卡信息的选项,您可以再次调用setupForm。我不知道Coffeescept,但这是一个大致的想法:

$('#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