2012-09-06 05:01:17 +00:00
{% 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" / >
2012-09-10 20:17:30 +00:00
< link href = "/static/stripe/tag.css" rel = "stylesheet" type = "text/css" >
2012-09-26 22:03:46 +00:00
< 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-09-10 20:17:30 +00:00
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-09-06 05:01:17 +00:00
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-09-06 05:01:17 +00:00
2012-10-02 17:36:30 +00:00
< script >
2012-09-26 22:03:46 +00:00
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 %}
2012-09-06 05:01:17 +00:00
{% endblock %}
2012-10-01 19:31:17 +00:00
{% block content %}
< div class = "jsmodule rounded clearfix central" >
2012-09-06 05:01:17 +00:00
< div class = "jsmod-content" >
2012-10-01 19:31:17 +00:00
< div class = "fund_options clearfix" >
2012-10-01 19:53:41 +00:00
< div id = "donate_area" >
2012-10-01 19:31:17 +00:00
< form method = "GET" action = "{{nonprofit.link}}" >
{{ donate_form.non_field_errors }}
2012-10-05 19:05:15 +00:00
{{ donate_form }}
2012-10-01 19:31:17 +00:00
< 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 >
2012-10-01 19:31:17 +00:00
< / 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 >
2012-10-01 19:31:17 +00:00
< 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 >
2012-10-01 19:31:17 +00:00
< li > < a href = "#" > Learn more< / a > < / li >
< / ul >
< / div >
< / div >
{% comment %}
kept around for reference as the page is overhauled
2012-09-06 05:01:17 +00:00
< div > < h2 > Funding Your Pledge< / h2 >
2012-09-21 21:31:28 +00:00
< 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}}.
2012-09-06 05:01:17 +00:00
< 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 >
2012-09-21 21:31:28 +00:00
{% 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 %}
2012-09-06 05:01:17 +00:00
< / div >
< / div >
2012-09-21 21:31:28 +00:00
{% if nonprofit.is_on %}
2012-09-06 05:01:17 +00:00
< div id = "donate" class = "clearfix" >
< h3 > Donate to Charity< / h3 >
2012-09-06 20:55:32 +00:00
{% 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.
2012-09-06 05:01:17 +00:00
< / p >
< div id = "donate_charity" >
2012-09-10 20:17:30 +00:00
2012-09-06 05:01:17 +00:00
< 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" / >
2012-09-10 20:17:30 +00:00
< / form >
2012-09-06 05:01:17 +00:00
< / div >
< / div >
2012-09-21 21:31:28 +00:00
{% endif %}
2012-10-01 19:31:17 +00:00
{% endcomment %}
2012-09-06 05:01:17 +00:00
< 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 >
2012-09-06 05:01:17 +00:00
< / div >
< / div >
< / div >
< / div >
{% endblock %}