NewsBlur-viq/templates/profile/stripe_form.xhtml
2013-03-14 21:40:14 -07:00

120 lines
No EOL
4.4 KiB
HTML

{% extends 'base.html' %}
{% load typogrify_tags utils_tags zebra_tags %}
{% block bodyclass %}NB-static{% endblock %}
{% block extra_head_js %}
{% include_stylesheets "common" %}
{% include_javascripts "payments" %}
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
{% zebra_head_and_stripe_key %}
{% endblock %}
{% block content %}
<div class="NB-static-alert">
Due to overwhelming demand, free accounts are temporarily suspended.
<br />
By going premium you get full access to NewsBlur.
</div>
<div class="NB-static-form-wrapper" style="overflow:hidden">
<div class="NB-modal-feedchooser NB-static-feedchooser NB-feedchooser-type" style=" margin: 0 10% 0 0;
width: 360px;
float: right;">
<div class="NB-feedchooser-info">
<div class="NB-feedchooser-info-type">
<span class="NB-feedchooser-subtitle-type-prefix">Super-Mega</span> Premium Account
</div>
</div>
<ul class="NB-feedchooser-premium-bullets">
<li class="NB-1">
<div class="NB-feedchooser-premium-bullet-image"></div>Enable every site by going premium
</li>
<li class="NB-2">
<div class="NB-feedchooser-premium-bullet-image"></div>Sites updated up to 10x more often
</li>
<li class="NB-3">
<div class="NB-feedchooser-premium-bullet-image"></div>River of News (reading by folder)
</li>
<li class="NB-4">
<div class="NB-feedchooser-premium-bullet-image"></div>Privacy options for your blurblog
</li>
<li class="NB-5">
<div class="NB-feedchooser-premium-bullet-image"></div>Text view conveniently extracts the story
</li>
<li class="NB-6">
<div class="NB-feedchooser-premium-bullet-image"></div>You feed my poor, hungry dog for <span class="NB-feedchooser-hungry-dog">12 days</span><img src="/media//img/reader/shiloh.jpg" class="NB-feedchooser-premium-poor-hungry-dog">
</li>
<li class="NB-7">
<div class="NB-feedchooser-premium-bullet-image"></div>Choose how much you would like to pay
<div style="color: #490567">
The only difference is happiness
</div>
</li>
</ul>
</div>
<div class="NB-static-form NB-stripe-form">
<label>Username</label>
<div class="NB-stripe-username">{{ user.username }}</div>
<div class="NB-creditcards">
<img src="https://manage.stripe.com/img/credit_cards/visa.png">
<img src="https://manage.stripe.com/img/credit_cards/mastercard.png">
<img src="https://manage.stripe.com/img/credit_cards/amex.png">
<img src="https://manage.stripe.com/img/credit_cards/discover.png">
</div>
<form action="" method="POST" id="payment-form">{% csrf_token %}
<div>
{{ zebra_form.card_number.label_tag }}
{{ zebra_form.card_number }}
</div>
<div>
{{ zebra_form.card_cvv.label_tag }}
{{ zebra_form.card_cvv }}
</div>
<div>
{{ zebra_form.card_expiry_month.label_tag }}
{{ zebra_form.card_expiry_month }}
</div>
<div>
{{ zebra_form.card_expiry_year.label_tag }}
{{ zebra_form.card_expiry_year }}
</div>
<div>
{{ zebra_form.email.label_tag }}
{{ zebra_form.email }}
</div>
<div style="overflow: hidden">
<style>
.NB-stripe-plan-choice label:first-child {
display: none;
}
</style>
{{ zebra_form.plan.label_tag }}
{{ zebra_form.plan|safe }}
</div>
{{ zebra_form.last_4_digits }}
{{ zebra_form.stripe_token }}
<noscript><h3>Note:&nbsp; this form requires Javascript to use.</h3></noscript>
<span class="payment-errors"></span>
<button type="submit" class="submit-button NB-modal-submit-button NB-modal-submit-green">Submit Payment</button>
</form>
</div>
</div>
{% endblock %}