regluit/frontend/templates/fund_the_pledge.html

{% extends "basepledge.html" %}
{% load humanize %}

{% block title %}Fund Your {{ action }}{% 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">{{ action|capfirst  }}</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 gift will support it</li>
                    <li>If not, your gift 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>{{ action|capfirst  }} 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 {{ action|capfirst  }}" /> 
                </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 &amp; Pledges page</a>.
        </p>
	{% else %}
        <div id="authorize" {% if nonprofit.is_on %}class="off clearfix"{% else %}class="clearfix"{% endif %}>
            <h3>{{ action|capfirst }} 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>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 {{ action|capfirst }}" />
    
                </form>
            </div>
        </div>
	{% endif %}

	</div>
</div>

{% endblock %}