227 lines
10 KiB
HTML
227 lines
10 KiB
HTML
{% extends "basepledge.html" %}
|
|
{% load humanize %}
|
|
|
|
{% block title %}Fund Your Pledge{% endblock %}
|
|
|
|
{% block extra_extra_head %}
|
|
{% include "stripe_stuff.html" %}
|
|
<script type="text/javascript" src="/static/js/loader-gif.js"></script>
|
|
<script type="application/x-javascript">
|
|
|
|
var $j = jQuery.noConflict();
|
|
|
|
$j(document).ready(function() {
|
|
// don't let users modify their pledge amount on this page; it's just here for reference
|
|
// if they modified it here we'd have to faff about with validating premiums
|
|
$j('#id_preapproval_amount').prop('disabled', true);
|
|
|
|
{% if nonprofit.is_on %}
|
|
// make the donate/pledge buttons pretty
|
|
$j("#pledge_option").click(function() {
|
|
$j("#authorize").show();
|
|
});
|
|
|
|
$j("#donate_area").mouseenter(function() {
|
|
$j("#donate_explanation").addClass("highlight");
|
|
});
|
|
|
|
$j("#donate_area").mouseleave(function() {
|
|
$j("#donate_explanation").removeClass("highlight");
|
|
});
|
|
|
|
$j("#donate_explanation").mouseenter(function() {
|
|
$j("#donate_explanation").addClass("highlight");
|
|
});
|
|
|
|
$j("#donate_explanation").mouseleave(function() {
|
|
$j("#donate_explanation").removeClass("highlight");
|
|
});
|
|
|
|
$j("#pledge_area").mouseenter(function() {
|
|
$j("#pledge_explanation").addClass("highlight");
|
|
});
|
|
|
|
$j("#pledge_area").mouseleave(function() {
|
|
$j("#pledge_explanation").removeClass("highlight");
|
|
});
|
|
|
|
$j("#pledge_explanation").mouseenter(function() {
|
|
$j("#pledge_explanation").addClass("highlight");
|
|
});
|
|
|
|
$j("#pledge_explanation").mouseleave(function() {
|
|
$j("#pledge_explanation").removeClass("highlight");
|
|
});
|
|
{% endif %}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|
|
{% block news %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="jsmodule rounded clearfix central">
|
|
<div class="jsmod-content">
|
|
|
|
{% if nonprofit.is_on %}
|
|
|
|
<div class="fund_options clearfix">
|
|
<div id="donate_area">
|
|
<form method="GET" action="{{ nonprofit.link }}">
|
|
{{ donate_form.non_field_errors }}
|
|
{{ donate_form }}
|
|
<input name="donate_submit" type="submit" value="Donate" id="donate_submit" class="loader-gif" />
|
|
</form>
|
|
</div>
|
|
<div id="pledge_area">
|
|
<a class="fakeinput" id="pledge_option">Pledge</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fund_options clearfix">
|
|
<div id="donate_explanation">
|
|
<ul>
|
|
<li>Donate to our partner nonprofit, {{ nonprofit.name }}</li>
|
|
<li>Pay immediately</li>
|
|
<li>If the campaign succeeds, your donation will support it</li>
|
|
<li>If not, your donation will support {{ nonprofit.name }}</li>
|
|
<li><a href="#">Learn more</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="pledge_explanation">
|
|
<ul>
|
|
<li>Pledge toward this campaign</li>
|
|
<li>Pay later, only if this campaign succeeds</li>
|
|
<li>Your pledge will be used only to support this campaign.</li>
|
|
<li><a href="#">Learn more</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% if request.user.profile.account %}
|
|
<div id="authorize" {% if nonprofit.is_on %}class="off clearfix"{% else %}class="clearfix"{% endif %}>
|
|
<h3>Pledge by Credit Card</h3>
|
|
<p>Unglue.it has a {{ request.user.profile.account.card_type }} credit card on file for you (we use <a href="https://stripe.com/">Stripe</a> to keep your information secure).
|
|
The last four digits of the card are {{ request.user.profile.account.card_last4 }}.
|
|
</p>
|
|
<form action="#" method="POST" id="use-account-form">
|
|
<div class="innards">
|
|
{% csrf_token %}
|
|
{{ form.non_field_errors }}
|
|
{{ form.as_p }}
|
|
<input id="use_account_submit" name="use_account" type="submit" class="submit-button loader-gif" value="Complete Pledge" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<br />
|
|
<p>Want to use a different card? You can change your credit card info on your <a href="{% url manage_account %}?next={{ request.get_full_path|urlencode }}#your_payment_info">Account & Pledges page</a>.
|
|
</p>
|
|
{% else %}
|
|
<div id="authorize" {% if nonprofit.is_on %}class="off clearfix"{% else %}class="clearfix"{% endif %}>
|
|
<h3>Pledge by Credit Card</h3>
|
|
<p>Unglue.it uses <a href="https://stripe.com/">Stripe</a> to securely manage your credit card information.
|
|
</p>
|
|
<div id="cc_pledge">
|
|
<form action="" method="POST" id="payment-form">
|
|
<div class="innards">
|
|
<div class="clearfix">
|
|
{% csrf_token %}
|
|
{{ form.non_field_errors }}
|
|
{{ form.as_p }}
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>Card Number:</label>
|
|
<input id="card_Number" type="text" class="card-number" />
|
|
</div>
|
|
<div class="form-row clearfix cvc">
|
|
<label>CVC:</label>
|
|
<input id="card_CVC" type="password" size="4" autocomplete="off" class="card-cvc" /> <span id="cvc_help">(what is this?)</span>
|
|
<div id="cvc_answer"><img src="/static/images/cvcimage.jpeg" alt="a typical credit card with CVC">For most cards, this is a 3-digit number at the end of the signature strip on the back. For American Express, it's a four-digit number in small print on the front.</div>
|
|
</div>
|
|
<div class="form-row clearfix initial_values">
|
|
<label>Expiration:</label>
|
|
<input id="card_ExpiryMonth" type="text" size="2" value="MM" class="card-expiry-month" />
|
|
<input id="card_ExpiryYear" type="text" size="4" value="YYYY" class="card-expiry-year" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>Name:</label>
|
|
<input id="card_Name" type="text" class="address" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>Address Line 1:</label>
|
|
<input id="card_AddressLine1" type="text" class="address" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>Address Line 2:</label>
|
|
<input id="card_AddressLine2" type="text" class="address" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>City:</label>
|
|
<input id="card_AddressCity" type="text" class="address" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>State/Province :</label>
|
|
<input id="card_AddressState" type="text" class="address" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>ZIP/Postal Code:</label>
|
|
<input id="card_AddressZip" type="text" class="address" />
|
|
</div>
|
|
<div class="form-row clearfix">
|
|
<label>Country:</label>
|
|
<input id="card_AddressCountry" type="text" class="address" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-errors"></div>
|
|
<input id="cc_submit" type="submit" class="submit-button loader-gif" value="Complete Pledge" />
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% comment %}
|
|
kept around for reference as the page is overhauled
|
|
|
|
<div><h2>Funding Your Pledge</h2>
|
|
<div>We're so happy that you've decided to {% if modified %}increase your pledge{% else %}join{% endif %} this campaign.
|
|
{% if nonprofit.is_on %}
|
|
We have two ways we can fund your pledge of ${{preapproval_amount}}.
|
|
<ol>
|
|
<li>You can <a href="#donate">make a donation now</a> to {{nonprofit.name}}, a non-profit charity that's working with Unglue.it to give books to the world.</li>
|
|
<li>You can <a href="#authorize">give us your credit card</a> information now; we'll charge your card only if the campaign succeeds.</li>
|
|
</ol>
|
|
{% else %}
|
|
To fund your pledge of ${{preapproval_amount}}, you can <a href="#authorize">give us your credit card</a> information now; we'll charge your card only if the campaign succeeds.
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if nonprofit.is_on %}
|
|
<div id="donate" class="clearfix">
|
|
<h3>Donate to Charity</h3>
|
|
{% if request.user.credit.balance %}You have a donation credit of ${{ request.user.credit.balance }}. The amount that's uncommitted is ${{ request.user.credit.available }}, so you need to add at least ${{ needed }}.{% endif %}
|
|
<p> Click the button to be sent to the {{nonprofit.name}} donation site. When you complete your donation of at least ${{ needed }}, you'll be sent back to Unglue.it and your pledge will automatically be entered. You can move your donation credit to another campaign or campaigns at any time. {{nonprofit.name}} will hold all funds and earn any interest until a campaign you support succeeds.
|
|
</p>
|
|
<div id="donate_charity">
|
|
|
|
<form method="GET" action="{{nonprofit.link}}">
|
|
{{ donate_form.non_field_errors }}
|
|
{{donate_form}}
|
|
<input name="donate_submit" type="submit" value="Go Donate!" id="donate_submit" class="loader-gif"/>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endcomment %}
|
|
|
|
{% endblock %}
|
|
|