Zana Stripe Subscribe Form

gistfile1.txt

{% extends "djstripe/base.html" %}
{% load static djstripe_tags %}

{% block title %}Zana Edge Subscription{% endblock title %}

{% block content %}
<!-- Modal for server update -->
  <div class="modal fade" id="in-progress">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Server Update In-Progress <img class="pull-right" src="{% static 'img/in-progress.gif' %}" /></h4>
        </div>
        <div class="modal-body">
            <div class="progress">
                <div class="progress-bar" style="width: 0%;"></div>
            </div>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<ul class="breadcrumb">
  <li><a href="{% url 'djstripe:account' %}">Home</a></li>
  <li class="active">Subscription</li>
</ul>
<h2 style="text-align: center;">Zana Edge Subscription</h2>

{% if error %}
    <div class="alert alert-error">{{ error }}</div>
{% endif %}
{% if view.error %}
    <div class="alert alert-error">{{ view.error }}</div>
{% endif %}

<div class="row">
    {% for plan in PLAN_LIST %}
      {% with plan_count=PLAN_LIST|length %}
        <div class="col-xs-{{ 6|djdiv:plan_count|floatformat }} col-xs-offset-3">
      {% endwith %}
            <form
              {% if not customer.current_subscription or customer.current_subscription.status == CurrentSubscription.STATUS_CANCELLED %}
                  action="{% url 'djstripe:subscribe' %}" class="djstripe-subscribe"  
                  data-key="{{ STRIPE_PUBLIC_KEY }}"
                  data-amount="{{ plan.price }}"
                  data-name="{{ plan.name }}"
                  data-description="{{ plan.description }}"
              {% else %}
                  data-stripe-key="{{ STRIPE_PUBLIC_KEY }}" 
                  action="{% url 'djstripe:change_plan' %}" class="djstripe-change-plan"
              {% endif %}
            method="POST">

               
                {% csrf_token %}
                <input type="hidden" name="plan" value="{{ plan.plan }}" />
                <!-- <span class="discount-field"><label>Discount Code:</label>
                <input type="text"/></span> -->
                <input name="stripe_token" type="hidden" /> 

                <!-- disable this when clicked -->
                <button style="width:100%; border-radius:4px;"
                  {% if customer.current_subscription.plan == plan.plan and customer.current_subscription.status != CurrentSubscription.STATUS_CANCELLED %}
                    disabled="true"
                  {% endif %}
                  type="submit" class="btn btn-primary">
                  {% comment %}
                    {% with image=plan.image|default:"img/default-plan-image.png" %}
                      <img src="{% static image %}" class="img-thumbnail" />
                    {% endwith %}
                  {% endcomment %}
                  <h3>{{ plan.name }}</h3>
                  <p>{{ plan.description }}</p>
                </button>
              {% if not customer.current_subscription or customer.current_subscription.status == CurrentSubscription.STATUS_CANCELLED %}
                <!-- do nothing -->
              {% elif customer.current_subscription.plan == plan.plan %}
                <h4>Your Current Plan</h4>
              {% endif %}
              <span class="discount-span"><label>Discount Code:</label>
              <input type="text" id="discount-field"/></span>  
            </form>
        </div>
    {% endfor %}
    <div class="row">
      <div class="col-xs-12">
        <p style="margin-top:30px; padding-left:15px"><a href="/lessons">Click here to go to the lessons page</a>.</p>
      </div>
    </div>
</div>

<style>
#content.container h2 {
  text-align: center;
}

#content.container p {
  text-align: center;
}

.djstripe-change-plan h4 {
  text-align: center;
}

.discount-span {
  display: block;
  text-align: center;
  margin: 15px 0 15px 0;
}

@media (max-width: 992px) {
  form button h3 {
    font-size: 18px;
  }
}

@media (max-width: 992px) {
  form button p {
    font-size: 10px;
  }
}

@media (max-width: 650px) {
  form button h3 {
    font-size: 14px;
  }
}

@media (max-width: 650px) {
  form button p {
    font-size: 8px;
  }
}

@media (max-width: 530px) {
  form button h3 {
    font-size: 14px;
    white-space: pre-wrap;
  }
}

@media (max-width: 530px) {
  form button p {
    font-size: 8px;
    white-space: pre-wrap;
  }
}
</style>

{% endblock content %}

{% block bottom_js %}
{{ block.super }}
<script src="https://checkout.stripe.com/v2/checkout.js"></script>
<script text="text/javascript">
$(function() {
    $('body').on("click", '.djstripe-subscribe button[type=submit]', function(e) {
      e.preventDefault();
      // retrieve current $(".djstripe-subscribe")
      var $form = $(e.target).parents('form'),
          token = function(res) {
            $form.find("input[name=stripe_token]").val(res.id);
            $("button[type=submit]").attr("disabled", "true");
            $('#in-progress').modal({"keyboard": false})
            $('.progress-bar').animate({width:'+=100%'}, 2000);
            $form.trigger("submit");
          };
      StripeCheckout.open({
        key:         '{{ STRIPE_PUBLIC_KEY }}',
        email:       '{{ user.email }}',
        name:        'Zana Edge',
        description:  'Premium content for $99/month',
        panelLabel:  'Subscribe',
        id: 'ZANAFAMILY',
        amount: 500,
        token:       token
      });
      return false;
    });
      {% if PLAN_LIST|length > 1 %}
        $('.djstripe-change-plan').click(function(e){
            $("button[type=submit]").attr("disabled", "true");
            $('#in-progress').modal({"keyboard": false})
            $('.progress-bar').animate({width:'+=100%'}, 2000);
            var $form = $(this);
            $form.trigger("submit");
        });
      {% endif %}
  $('.djstripe-subscribe button[type=submit]').click();
});
</script>

{% endblock %}