notebook/app/views/subscriptions/information.html.erb

<% if @selected_plan.nil? %>
  <% cents_due_now = 0 %>
  <div class="card light-blue white-text" style="padding: 20px;">
    Saving a payment method allows you to freely switch between Notebook.ai subscription plans with ease. Your information is stored securely in our payment processing provider, Stripe, and will not be shared with any other parties.
  </div>
<% else %>
  <%
    case @selected_plan.stripe_plan_id
    when 'premium'
      cents_due_now = 900
      service_length = 'one month'
      bill_frequency = 'month'
    when 'premium-trio'
      cents_due_now = 2400
      service_length = 'three months'
      bill_frequency = '3 months'
    when 'premium-annual'
      cents_due_now = 8400
      service_length = 'twelve months'
      bill_frequency = 'year'
    end
  %>

  <div class="card light-blue lighten-3">
    <div class="card-content">
      <p>
        You are signing up for Notebook.ai's <strong><%= @selected_plan.name %></strong> plan.

        You will be charged <%= number_to_currency(cents_due_now / 100.0) %> USD now
        for <%= service_length %> of membership, renewing every <%= bill_frequency %>.
      </p>
      <p>
        In order to get started, we need to collect your payment information below.
      </p>
    </div>
  </div>
<% end %>

<script type="text/javascript">
  Stripe.setPublishableKey('<%= Rails.application.config.stripe_publishable_key %>');

  $(function() {
    var $form = $('#payment-form');
    $form.submit(function(event) {
      // Disable the submit button to prevent repeated clicks:
      $form.find('.submit').prop('disabled', true);

      // Request a token from Stripe:
      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:
      return false;
    });

    function stripeResponseHandler(status, response) {
      // Grab the form:
      var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form:
        $form.find('.payment-errors').text(response.error.message);
        $form.find('.submit').prop('disabled', false); // Re-enable submission

      } else {
        // Insert the created token ID into the form so it gets submitted to the server:
        var token = response.id;
        $form.append($('<input type="hidden" name="stripeToken">').val(token));

        // Submit the form:
        $form.get(0).submit();
      }
    };
  });
</script>

<div class="card" style="padding: 20px 10px;">
  <form action="<%# Same URL, same GET params %>" method="POST" id="payment-form">
    <%= hidden_field_tag 'authenticity_token', form_authenticity_token %>
    <div class="row">
      <div class="col s12">
        <label>
          <span>Card Number</span>
          <input type="text" size="20" data-stripe="number">
        </label>
      </div>
    </div>

    <div class="row">
      <div class="col s4">
        <label>
          <span>Expiration month (MM)</span>
          <input type="text" size="2" data-stripe="exp_month">
        </label>
      </div>
      <div class="col s4">
        <label>
          <span>Expiration year (YY)</span>
          <input type="text" size="2" data-stripe="exp_year">
        </label>
      </div>
      <div class="col s4">
        <label>
          <span>CVC<%#<span>(?)</span>%></span>
          <input type="text" size="4" data-stripe="cvc">
        </label>
      </div>
    </div>

    <div class="row">
      <div class="col s12">
        <label>
          <span>Billing Postal Code</span>
          <input type="text" size="6" data-stripe="address_zip">
        </label>
      </div>
    </div>

    <div class="payment-errors red white-text center" style="margin-bottom: 10px;"></div>

    <div class="center">
      <% if @selected_plan.nil? %>
        <input type="submit" class="btn btn-primary blue" value="Save payment info">

      <% else %>
        <input type="submit" class="btn btn-primary blue" value="Submit payment">

        <%
          active_plan_on_stripe = @stripe_customer.subscriptions.data.select { |sub| sub.plan.id == @selected_plan.stripe_plan_id }.first
        %>
        <% if active_plan_on_stripe %>
          <p class="center">
            Since you've already paid for a <strong><%= @selected_plan.name %></strong> plan
            until <%= Time.at(active_plan_on_stripe.current_period_end).strftime('%B %d') %>, you will not be charged again
            for this plan until it renews on that date.
          </p>
        <% elsif @selected_plan.stripe_plan_id == 'premium' %>
          <p class="center">
            You will be charged <%= number_to_currency(@selected_plan.monthly_cents / 100) %> USD immediately, renewing
            monthly.
          </p>
          <p class="center">
            Of course, you can cancel at any time.
          </p>
        <% elsif @selected_plan.stripe_plan_id == 'premium-trio' %>
          <p class="center">
            You will be charged $25.00 USD immediately, renewing every three months.
          </p>
          <p class="center">
            Of course, you can cancel at any time.
          </p>
        <% elsif @selected_plan.stripe_plan_id == 'premium-annual' %>
          <p class="center">
            You will be charged <%= number_to_currency(@selected_plan.monthly_cents * 12 / 100) %> USD immediately, renewing
            annually.
          </p>
          <p class="center">
            Of course, you can cancel at any time.
          </p>
        <% end %>
      <% end %>
    </div>
  </form>
</div>