regluit/frontend/templates/fund_the_pledge.html

214 lines
7.6 KiB
HTML
Raw Normal View History

{% extends "basepledge.html" %}
{% load humanize %}
{% block title %}Fund Your Pledge{% endblock %}
{% block extra_extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/campaign.css" />
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" />
<link href="/static/stripe/tag.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript">
Stripe.setPublishableKey('{{STRIPE_PK}}');
</script>
<script type="application/x-javascript">
var $j = jQuery.noConflict();
2012-10-01 19:53:41 +00:00
$j(document).ready(function() {
$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");
});
2012-10-01 19:53:41 +00:00
$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");
});
});
</script>
2012-10-02 17:36:30 +00:00
<script>
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$j('.submit-button').removeAttr("disabled");
// show the errors on the form
$j(".payment-errors").html(response.error.message);
} else {
var form$ = $j("#payment-form");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripe_token' value='" + token + "' />");
// and submit
form$.get(0).submit();
}
}
$j().ready(function() {
$j("#payment-form").submit(function(event) {
// disable the submit button to prevent repeated clicks
$j('.submit-button').attr("disabled", "disabled");
Stripe.createToken({
number: $j('.card-number').val(),
cvc: $j('.card-cvc').val(),
exp_month: $j('.card-expiry-month').val(),
exp_year: $j('.card-expiry-year').val()
}, stripeResponseHandler);
// prevent the form from submitting with the default action
return false;
});
});
</script>
2012-10-01 19:53:41 +00:00
{% endblock %}
{% block news %}
{% endblock %}
{% block content %}
<div class="jsmodule rounded clearfix central">
<div class="jsmod-content">
<div class="fund_options clearfix">
2012-10-01 19:53:41 +00:00
<div id="donate_area">
<form method="GET" action="{{nonprofit.link}}">
{{ donate_form.non_field_errors }}
2012-10-05 19:05:15 +00:00
{{ donate_form }}
<input name="donate_submit" type="submit" value="Donate" id="donate_submit" />
</form>
</div>
2012-10-01 19:53:41 +00:00
<div id="pledge_area">
<a class="fakeinput" id="pledge_option">Pledge</a>
</div>
</div>
<div class="fund_options clearfix">
<div id="donate_explanation">
<ul>
2012-10-05 19:05:15 +00:00
<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>
2012-10-05 19:05:15 +00:00
<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>
{% 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" />
</form>
</div>
</div>
{% endif %}
{% endcomment %}
<div id="authorize" class="clearfix">
<h3>Pledge by Credit Card</h3>
<p>Unglue.it uses Stripe to securely manage your Credit Card information.
</p>
<div id="cc_pledge">
2012-10-05 19:05:15 +00:00
<span class="payment-errors"></span>
<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" size="20" autocomplete="off" class="card-number"/>
</div>
<div class="form-row clearfix">
<label>CVC:</label>
<input id="card_CVC" type="text" size="4" autocomplete="off" class="card-cvc"/>
</div>
<div class="form-row clearfix">
<label>Expiration:</label>
<input id="card_ExpiryMonth" type="text" size="2" value="MM" class="card-expiry-month" />
<span> / </span>
<input id="card_ExpiryYear" type="text" size="4" value="YYYY" class="card-expiry-year" />
</div>
</div>
<input id="cc_submit" type="submit" class="submit-button" value="Complete Pledge" />
</form>
</div>
</div>
</div>
</div>
{% endblock %}