訂閱選擇表單中的不同選項

使用Rails項目可讓用戶註冊並選擇通過Stripe處理的訂閱。訂閱選擇表單中的不同選項

所以它是如何工作的是他們創建一個帳戶（使用設計），然後將它們路由到一個頁面，他們可以在同一個表單中選擇一個免費的計劃或高級計劃。

我想要完成的是這樣的：如果他們選擇免費計劃，當他們提交時不需要信用卡信息（並且我沒有Stripe中的'免費'計劃，所以我不'不需要擔心這種交互）。

如果他們選擇保費計劃，我希望應用程序知道他們必須輸入信用卡信息，否則將不會通過。

我跟隨Ryan Bates的Railscast討論了這個問題，並修改了他的代碼以適應我的情況。我相信答案是改變CoffeeScript表格，但我的技能有點生疏。我嘗試了幾種不同的解決方案，但無法使其運行。好奇的是，如果有人能讓我知道如何組織這樣的邏輯來實現這一點。

下面的文件中的當前結果允許我創建一個免費訂閱，只有當我先選擇並點擊提交。如果我選擇高級按鈕，然後切換回來，它不起作用。）

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>

來源

2013-12-07 Jared Rader

許多表單驗證插件，您可以使用 – charlietfl

我在同樣的情況所做的就是調用.off（我的形式，當用戶上：

我的CoffeeScript形式subscriptions.js.coffee選擇了一個不需要信用卡信息的選項。如果他們然後選擇需要信用卡信息的選項，則可以再次調用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

來源

2013-12-08 16:12:57 Dhaulagiri

謝謝！我會給它一個鏡頭。 –

訂閱選擇表單中的不同選項

回答

相關問題