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
      %{<div class="current-plan">Current Plan</div>}
    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>
    <% if request.path == '/' %>
    Need more space? We’ve got you covered.
      <br>
      Upgrading gives you more space, bandwidth, features, <strong>and helps us stay independent and keep the free sites free.</strong>
    <% elsif request.path.match /\/plan/ %>
      Support Us
    <% end %>
  </h2>

  <% if request.path.match /\/plan/ %>
    <div class="row" style="margin-top: 0px">
      <div class="col-75" style="margin-left: auto; margin-right: auto;">
        <h3 class="subtitle">
          The Neocities Supporter Plans are a way to help sustain the site. When you join a 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>
  <% end %>

  <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="いきましょう"></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">
      <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 or credit 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"><i class="fa fa-times"></i></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>. <% if current_site && parent_site.plan_type != 'free' %>We'll credit or refund the remaining amount you didn't use on your previous plan.<% end %> 
          <% 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 cancel" 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 %>