구독 선택 양식의 다른 옵션

Question

사용자가 가입 한 후 구독을 선택할 수있는 레일스 프로젝트 작업 (Stripe을 통해 처리됨).

그래서 어떻게 작동합니까? (Devise를 사용하여) 계정을 생성 한 다음 무료 양식이나 프리미엄 플랜을 같은 양식으로 선택할 수있는 페이지로 경로를 지정합니다.

내가 원하는 것은 무료 플랜을 선택하면 제출 한 신용 카드 정보가 필요하지 않으며 스트라이프 안에 '무료'요금제가 없기 때문에 ' 그 상호 작용에 대해 걱정할 필요가 없음).

프리미엄 요금제를 선택하는 경우 앱에 신용 카드 정보를 입력해야한다는 사실을 알리 길 원할 것입니다.

필자는이 주제에 대해 Ryan Bates의 Railscast를 따라했으며, 상황에 맞게 코드를 수정했습니다. 나는 대답이 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