regluit/frontend/templates/fund_the_pledge.html

{% 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="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function() {
    // provide gently grey help text
    var inputs = $j('.initial_values input');
    inputs.css('color', '#D6DDE0');

    // remove help text when input is selected
    // user-entered text should be in usual text color
    inputs.on("focus", function() {
        defaultValue = $j(this).val();
        $j(this).val('');
        $j(this).css('color', '#3d4e53')
    });

    // restore iff user hasn't entered anything
    inputs.on("blur", function() {
        if($j(this).val() == '') {
            $j(this).val(defaultValue).css('color', '#D6DDE0');
        }
    });
});
</script>

<script type="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function() {
    $j('#cvc_help').on("mouseover", function() {
        $j('#cvc_answer').show();
    });
    $j('#cvc_help').on("mouseleave", function() {
        $j('#cvc_answer').hide();
    });
});
</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>

<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).show();
    } 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(),
        address_line1: $j('#card_AddressLine1').val(),
        address_line2: $j('#card_AddressLine2').val(),
        address_state: $j('#card_AddressState').val(),
        address_zip: $j('#card_AddressZip').val(),
        address_city: $j('#card_AddressCity').val(),
        address_country: $j('#card_AddressCountry').val(),
        name: $j('#card_Name').val()
    }, stripeResponseHandler);

    // prevent the form from submitting with the default action
    return false;
  });
});
</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" />
                </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 %}
	<div id="authorize" {% if nonprofit.is_on %}class="off clearfix"{% else %}class="clearfix"{% endif %}>
	    <h3>Pledge by Credit Card</h3>
	    {% if request.user.profile.account %}
	    <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" value="Complete Pledge" /> 
            </div>           
        </form>
	    {% else %}
	    <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" autocomplete="off" class="card-number"/>
                    </div>
                    <div class="form-row clearfix cvc">
                        <label>CVC:</label>
                        <input id="card_CVC" type="text" 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">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" value="Complete Pledge" />

            </form>
	    </div>
	    {% endif %}
	</div>

	</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 %}

{% endblock %}