Ability to change stored credit card

app/plan.rb

@@ -35,6 +35,9 @@ post '/plan/update' do
     end
   end
 
+  # Do not create customer if there is already a customer. Is this necessary?
+  redirect request.referrer if current_site.stripe_subscription_id
+
   site ||= parent_site
 
   DB.transaction do

app/settings.rb

@@ -334,3 +334,29 @@ get '/settings/unsubscribe_email/?' do
   end
   erb :'settings/account/unsubscribe'
 end
+
+post '/settings/update_card' do
+  require_login
+
+  customer = Stripe::Customer.retrieve current_site.stripe_customer_id
+
+  old_card_ids = customer.sources.collect {|s| s.id}
+
+  begin
+    customer.sources.create source: params[:stripe_token]
+  rescue Stripe::InvalidRequestError => e
+    if  e.message.match /cannot use a.+token more than once/
+      flash[:error] = 'Card is already being used.'
+      redirect '/settings#billing'
+    else
+      raise e
+    end
+  end
+
+  old_card_ids.each do |card_id|
+    customer.sources.retrieve(card_id).delete
+  end
+
+  flash[:success] = 'Card information updated.'
+  redirect '/settings#billing'
+end

models/site.rb

@@ -980,6 +980,10 @@ class Site < Sequel::Model
     PLAN_FEATURES[plan_type.to_sym][:name]
   end
 
+  def stripe_paying_supporter?
+    stripe_customer_id && !plan_ended && values[:plan_type].match(/free|special/).nil?
+  end
+
   def unconverted_legacy_supporter?
     stripe_customer_id && !plan_ended && values[:plan_type].nil? && stripe_subscription_id.nil?
   end

views/plan/_signupcode.erb

@@ -13,10 +13,6 @@
 
     var signupform = $(event.target)
 
-    <% if current_site && parent_site.stripe_subscription_id %>
-      return true
-    <% end %>
-
     var planError = $('#plan_error')
     planError.css('display', 'none')
     signupform.find(':submit').prop('disabled', true)

views/settings/account.erb

@@ -27,6 +27,9 @@
           <li><a href="#sites" data-toggle="tab">Sites</a></li>
           <li><a href="#password" data-toggle="tab">Password</a></li>
           <li><a href="#email" data-toggle="tab">Email</a></li>
+          <% if current_site.stripe_paying_supporter? %>
+            <li><a href="#billing" data-toggle="tab">Billing</a></li>
+          <% end %>
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" id="plan">
@@ -41,6 +44,11 @@
           <div class="tab-pane" id="email">
             <%== erb :'settings/account/email' %>
           </div>
+          <% if current_site.stripe_paying_supporter? %>
+            <div class="tab-pane" id="billing">
+              <%== erb :'settings/account/billing' %>
+            </div>
+          <% end %>
         </div>
       </div>
     </section>

views/settings/account/billing.erb

@@ -0,0 +1,45 @@
+<h2>Change Credit Card</h2>
+  <p>This allows you to change your currently stored credit card. You will be charged at the regular monthly cycle.</p>
+
+  <div>
+    <div id="plan_error" class="alert alert-block alert-error" style="display:none"></div>
+    <form id="upgradeForm" method="POST" action="/settings/update_card">
+      <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
+      <input type="hidden" value="supporter" name="plan_type">
+      <input id="stripe_token" name="stripe_token" type="hidden" value="<%= params[:stripe_token] %>">
+
+      <div class="credit-card-input no-js" id="skeuocard" style="margin-left: auto; margin-right: auto; margin-bottom: 20px">
+        <p class="no-support-warning"></p>
+        <label for="cc_type">Card Type</label>
+        <select name="cc_type">
+          <option value="">...</option>
+          <option value="visa">Visa</option>
+          <option value="discover">Discover</option>
+          <option value="mastercard">MasterCard</option>
+          <option value="maestro">Maestro</option>
+          <option value="jcb">JCB</option>
+          <option value="unionpay">China UnionPay</option>
+          <option value="amex">American Express</option>
+          <option value="dinersclubintl">Diners Club</option>
+        </select>
+        <label for="cc_number">Card Number</label>
+        <input type="text" name="cc_number" id="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19">
+        <label for="cc_exp_month">Expiration Month</label>
+        <input type="text" name="cc_exp_month" id="cc_exp_month" placeholder="00">
+        <label for="cc_exp_year">Expiration Year</label>
+        <input type="text" name="cc_exp_year" id="cc_exp_year" placeholder="00">
+        <label for="cc_name">Cardholder's Name</label>
+        <input type="text" name="cc_name" id="cc_name" placeholder="John Doe">
+        <label for="cc_cvc">Card Validation Code</label>
+        <input type="text" name="cc_cvc" id="cc_cvc" placeholder="123" maxlength="3" size="3">
+      </div>
+    </form>
+
+    <a href="/" class="btn-Action" onclick="$('#upgradeForm').submit(); return false">Update Card</a>
+  </div>
+
+<%== erb :'plan/_signupcode', layout: false %>
+
+<script>
+  card = new Skeuocard($('#skeuocard'))
+</script>