neocities/views/plan/_pricing.erb

<%
  def plan_pricing_button(plan_type)
    plan_type = plan_type.to_s

    if !parent_site
      %{<a href="/#new" class="btn-Action">Sign Up</a>}
    elsif parent_site && parent_site.plan_type == plan_type
      %{<p style="padding-top: 15px; padding-bottom: 14px"><strong>Current Plan</strong></p>}
    else
      if plan_type == 'supporter'
        plan_price = "$#{Site::PLAN_FEATURES[plan_type.to_sym][:price]*12}, once per year"
      else
        plan_price = "$#{Site::PLAN_FEATURES[plan_type.to_sym][:price]}, monthly"
      end
      %{<a data-plan_name="#{Site::PLAN_FEATURES[plan_type.to_sym][:name]}" data-plan_type="#{plan_type}" data-plan_price="#{plan_price}" onclick="return false" class="btn-Action planPricingButton">#{parent_site.plan_type == 'free' ? 'Upgrade' : 'Change'}</a>}
    end
  end
%>

<section class="section plans">
  <h2>
    Need more space? We’ve got you covered.
    <% if request.path == '/' %>
      <br>
      Upgrading gives you more space, bandwidth, features, <strong>and helps us stay independent and keep the free sites free.</strong>
    <% end %>
  </h2>

  <div class="plan-overview">
    <div class="header">
      <div class="col col-25 personal">
        Free
      </div>
      <div class="col col-75 professional">
        Supporter
      </div>
    </div>

    <div class="body">
      <div class="col col-25 free">
        <div class="plan-image free" data-original-title="Pick me!">
        </div>
        <h3>Free</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:free][:price] %></div>
        <div class="interval">per month</div>
        <%== plan_pricing_button :free %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:free][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:free][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
        </ul>
      </div>

      <div class="col col-25 supporter">
        <div class="plan-image" data-original-title="No no, pick me!"></div>
        <h3>Supporter</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:supporter][:price] %></div>
        <div class="interval">per month, billed annually</div>
        <%== plan_pricing_button :supporter %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:supporter][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>More space</li>
        </ul>
      </div>

      <div class="col col-25 catbus">

        <div class="plan-image" data-original-title="VROOOOOOM!"></div>
        <h3>Cat Bus</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:catbus][:price] %></div>
        <div class="interval">per month</div>
        <%== plan_pricing_button :catbus %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:catbus][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:catbus][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>Even more space</li>
        </ul>
      </div>

      <div class="col col-25 fatcat">
        <div class="plan-image" data-original-title="Jolly good."></div>
        <h3>Fat Cat</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:fatcat][:price] %></div>
        <div class="interval">per month</div>
        <%== plan_pricing_button :fatcat %>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:fatcat][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:fatcat][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>A lot more space!</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2> -->
  <h2 style="margin-top: 2em">Compare Plans</h2>
  <table class="plan-chart">
    <tr>
      <th class="feature-column"></th>
      <th>
        <h3>Free</h3>
        <p>$<%= Site::PLAN_FEATURES[:free][:price] %>/mo</p>
        <%== plan_pricing_button :free %>
      </th>
      <th class="professional">
        <h3>Supporter</h3>
        <p>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo</p>
        <%== plan_pricing_button :supporter %>
      </th>
      <th class="professional">
        <h3>Cat Bus</h3>
        <p>$<%= Site::PLAN_FEATURES[:catbus][:price] %>/mo</p>
        <%== plan_pricing_button :catbus %>
      </th>
      <th class="professional">
        <h3>Fat Cat</h3>
        <p>$<%= Site::PLAN_FEATURES[:fatcat][:price] %>/mo</p>
        <%== plan_pricing_button :fatcat %>
      </th>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">Storage</span>
      </td>
      <td><%= Site::PLAN_FEATURES[:free][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:supporter][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:catbus][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:fatcat][:space].to_bytes_pretty %></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="How much content you can serve in one month. Don’t worry—these are very soft limits, temporary surges are fine, we won't take your site down automatically, and we're very flexible.">Bandwidth</span>
      </td>
      <td><%= Site::PLAN_FEATURES[:free][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:catbus][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:fatcat][:bandwidth].to_bytes_pretty %></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="We will never put ads on your site, or give your data to marketers. In fact, we’re prohibited from doing it in our own Terms of Service.">No advertising, ever</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Our worldwide network of CDN servers cache your web site regionally, making your site load fast—no matter where your users are. 頑張る, 日本!">Global CDN Site Cache</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site comes with a free Neocities address (yoursitename.neocities.org).">Free Site Subdomain</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Add your domain name (yoursite.com) to your site!">Custom Domains</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="You can mount your Neocities site to your computer as a hard drive, making it easy to update with your favorite HTML editor.">WebDAV Uploading</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Downloading your neocities site is as easy as clicking a button.">One-Click Backups</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Site tags make it easy to find sites you’re interested in, and join communities of sites. It’s like a web ring, but even better.">Site Tags</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site has its own RSS feed that make it easy to let people know when your site changes.">RSS Feed</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Like a site on Neocities? Now you can follow it, and see when they update!">Follow Your Favorite Sites</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site now has its own profile page, allowing users to see when your site updates, follow your site, and leave feedback.">Site Profile</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Our HTML5 site editor makes it easy to make quick changes to your site, even if you’re on the run.">Neocities Site Editor</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <!--
    <tr>
      <td class="feature-column">Site Tipping (Coming Soon)</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    -->
    <tr>
      <td class="feature-column">
        <span data-original-title="Make as many sites as you want, with one account.">Unlimited Site Creation</span>
      </td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Upload your SSL certificate for your domain name, preventing snoops from seeing your user’s traffic.">Custom SSL Certificates</span>
      </td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="No whitelists—you can upload anything you want (no copyrighted content, trojans, or w4r3z, please).">No File Upload Type Restrictions</span>
      </td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
  </table>

  <% if request.path.match /\/plan/ %>
    <div class="row" style="margin-top: 50px; margin-bottom: 0px;">
      <div class="col-50" style="margin-left: auto; margin-right: auto">
        <h2>Why get a Supporter Plan?</h2>
      </div>
    </div>

    <div class="row" style="margin-top: 0px">
      <div class="col-75" style="margin-left: auto; margin-right: auto;">
        <h3 style="margin-top: 0px">
          The Neocities Supporter Plans are a way to help sustain the site. When you join the Supporter Plan, you are directly helping our quest to bring back the creative, independent web, and to continue to improve Neocities for everyone.
        </h3>
      </div>
    </div>
    
    <div class="row">
      <div class="col-60" style="margin-left: auto; margin-right: auto">
        <ul>
          <li>
            <strong>You get more space!</strong> Right now supporter plans get up to <strong><%= Site::PLAN_FEATURES[:fatcat][:space].to_space_pretty %></strong>.
          </li>
          <li>
            <strong>It helps your site.</strong> Funding helps us make your site faster globally, and provide more features.
          </li>
          <li>
            <strong>It helps us build.</strong> It supports our goal to work on Neocities full-time, without worrying about bills.
          </li>
          <li>
            <strong>It helps the web.</strong> The web needs more independent, creative sites. Neocities is leading the way.
          </li>
          <li>
            <strong>It's Open Source.</strong> Neocities is <a href="https://github.com/neocities" target="_blank">completely open source</a>, and we share code with the community.
          </li>
          <li>
            <strong>No lock-in.</strong> Redirecting your site is easy, free site downloads, and support for custom domains.
          </li>
          <li><strong>No ads, ever.</strong> We'll never put ads or watermarks on sites, and we don't sell user data.</li>
          <li>
            <strong>It's safe.</strong> We use <a href="https://stripe.com" target="_blank">Stripe</a> for payments, and never store your credit card information directly.
          </li>
          <li>
            <strong>It's affordable.</strong> As low as <strong>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/month</strong> (billed once every year). Higher tiers are optional (and appreciated!)
          </li>
          <li>
            <strong>You can cancel or change plans anytime.</strong> If you do, we'll refund/prorate the amount you didn't use.
          </li>
        </ul>
      </div>
    </div>
  <% end %>
</section>

<script>
  $(function() {
    $('.feature-column span').tooltip({
      placement: 'right'
    })

    $('.plan-image').tooltip({
      placement: 'top'
    })
  })

  $(".planPricingButton").on('click', function(obj) {
    $('#upgradePlanType').val($(obj.target).attr('data-plan_type'))
    $('#upgradeFormPlanName').text($(obj.target).attr('data-plan_name'))
    $('#upgradeFormPlanPrice').text($(obj.target).attr('data-plan_price'))
    $('#planSignup').modal()
  })
</script>

<div class="modal hide fade" id="planSignup" tabindex="-1" role="dialog" aria-labelledby="planSignupLabel" aria-hidden="true">
  <form id="upgradeForm" method="POST" action="/plan/update">
    <input type="hidden" value="<%= csrf_token %>" name="csrf_token">
    <input type="hidden" value="" name="plan_type" id="upgradePlanType">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">x</button>
      <h3 id="planSignupLabel">
        <% if parent_site && parent_site.plan_type == 'free' %>
          Upgrade
        <% else %>
          Change
        <% end %>
      </h3>
    </div>
    <div class="modal-body">
        <div>
          You are <% if current_site && parent_site.plan_type == 'free' %>upgrading<%else%>changing<%end%> to the <strong><span id="upgradeFormPlanName"></span> Plan</strong>. You will be charged <span id="upgradeFormPlanPrice"></span>. 
          <% unless current_site && parent_site.stripe_customer_id %>
            Please enter your Credit Card number:
          <% end %>
        </div>

        <input id="stripe_token" name="stripe_token" type="hidden" value="<%= params[:stripe_token] %>">

        <div style="margin-top: 30px">
          <div id="plan_error" class="alert alert-block alert-error" style="display:none"></div>

          <% unless params[:stripe_token] || (current_site && parent_site.stripe_customer_id) %>
            <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>
          <% end %>
        </div>

        <% unless params[:stripe_token] || (current_site && parent_site.stripe_customer_id) %>
          <p>
            <strong>Don't have a Credit Card?</strong> We support Bitcoin and Paypal! <a href="/donate" target="_blank">Click here</a> for more information.
          </p>
        <% end %>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
      <button type="submit" class="btn btn-Action">Upgrade</button>
    </div>
  </form>
</div>

<% if current_site %>
  <link rel="stylesheet" href="/css/skeuocard.reset.css" />
  <link rel="stylesheet" href="/css/skeuocard.css" />
  <script src="/js/skeuocard.min.js"></script>
  <script src="/js/cssua.min.js"></script>
  <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

  <script>
    Stripe.setPublishableKey('<%= $config['stripe_publishable_key'] %>')

    $(function() {
      card = new Skeuocard($("#skeuocard"))
    })

    $('#upgradeForm').submit(function(event) {
      if($('#stripe_token').val() != '')
        return true

      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)

      Stripe.card.createToken({
        number: $('[name="cc_number"]').val(),
        cvc: $('[name="cc_cvc"]').val(),
        exp_month: $('[name="cc_exp_month"]').val(),
        exp_year: $('[name="cc_exp_year"]').val()
      }, function(status, response) {
        console.log(response)
        if(response.error) {
          planError.text(response.error.message)
          planError.css('display', 'block')
          window.location = '#plan_error_link'
          signupform.find(':submit').prop('disabled', false)
          return false
        } else {
          $('.credit-card-input').text('Thank you!')
          $('#stripe_token').val(response.id)
          signupform.submit()
        }
      })

      return false
    })

    $(function() {
      $('#upgradeForm').find(':submit').prop('disabled', false)
    })
  </script>


<% end %>