Различные варианты в форме выбора подписки

Question

Работа над проектом Rails, который позволяет пользователям регистрироваться, а затем выбирать подписку, которая обрабатывается через Stripe.

Итак, как это работает, они создают учетную запись (используя Devise), которая затем направляет их на страницу, где они могут выбрать либо бесплатный план, либо премиальный план в той же форме.

То, что я пытаюсь выполнить, заключается в следующем: если они выбирают бесплатный план, информация о кредитной карте не требуется, когда они попадают в submit (и у меня нет «свободного» плана внутри Stripe, t нужно беспокоиться об этом взаимодействии).

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

Я последовал за Rails Bates Railscast по этому вопросу и изменил его код в соответствии с моей ситуацией. Я считаю, что ответ заключается в изменении формы CoffeeScript, но мои навыки здесь немного ржавые. Я пробовал несколько разных решений, но не могу заставить его работать. Любопытно, если кто-то может дать мне знать, как организовать логику таким образом, чтобы достичь этого.

Текущий результат в нижеприведенном файле позволяет мне создать бесплатную подписку, только если я выберу ее первым и нажмите submit. Если я выберу кнопку премиум-класса и вернусь назад, это не сработает.

мой 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