问题描述:

Working on a Rails project that allows users to sign up and then select a subscription, which is handled via Stripe.

So how it works is they create an account (using Devise), which then routes them to a page where they can select either a free plan or premium plan in the same form.

What I'm trying to accomplish is this: If they select the free plan, no credit card info is required when they hit submit (and I don't have a 'free' plan inside Stripe, so I don't need to worry about that interaction).

If they select the premium plan, I want the app to know that they have to enter in the credit card info, or it won't go through.

I followed Ryan Bates' Railscast on the subject, and modified his code to suit my situation. I believe the answer is in changing up the CoffeeScript form, but my skills here are a bit rusty. I've tried several different solutions, but can't get it to work. Curious if someone can let me know how to organize the logic in such a way to accomplish this.

The current result in the file below allows me to create a free subscription only if I select that first and hit submit. If I select the premium button and then switch back, it doesn't work.

my coffeescript form in 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)

my subscription form

<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>

网友答案:

What I did in the same situation was call .off() on my form when the user selected an option that didn't require credit card information. If they then select an option that does require credit card information you can call setupForm again. I don't know Coffeescript, but this is the general idea:

$('#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
相关阅读:
Top