website Changeset - e0f0ee820fe3 · Conservancy Kallithea

Changeset - e0f0ee820fe3

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Bradley Kuhn (bkuhn) - 9 years ago 2014-12-03 23:10:45
bkuhn@ebb.org

Monthly supporter can enter variable amount.

This required some doing. I'm not completely sure it works, but I
roughly followed the tutorial available at:
https://www.paypal.com/webapps/mpp/get-started/create-recurring-donation-button
with back-reference to this:
https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/

My main concern with this setup currently is that 'p3' must be set to
'1', which would seem from the documentation to be saying the payment
will recur only once. There is a subtle hint via the tutorial that
setting 'src' to 1 will override 'p3' with whatever is found in 'srt',
but that's not said anywhere explicitly that I can find. So, I'm going
with this and I'll just test it myself with a monthly subscription to
see if it's indefinite (which is the behavior we herein desire).

Finally, note that "amount" is now a class rather than id, since I'm now
using the associated jQuery .on('input') code for both the annual and
monthly amount boxes.

2 files changed with 19 insertions and 7 deletions:

www/conservancy/static/supporter-page.js

www/conservancy/static/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/supporter-page.js

➞

Show inline comments

 /* Copyright (C) 2012-2013 Denver Gingerich,
 ** Copyright (C) 2013-2014 Bradley M. Kuhn.
 ** License: GPLv3-or-later
 **  Find a copy of GPL at https://sfconservancy.org/GPLv3
 */
 $(document).ready(function() {
     $('.toggle-content').hide();
     $('.toggle-control')
      .addClass('clickable')
      .bind('click', function() {
         var $control = $(this);
         var $parent = $control.parents('.toggle-unit');
         $parent.toggleClass('expanded');
         $parent.find('.toggle-content').slideToggle();
         // if control has HTML5 data attributes, use to update text
         if ($parent.hasClass('expanded')) {
             $control.html($control.attr('data-expanded-text'));
         } else {
             $control.html($control.attr('data-text'));
+        }
     });
     $('a.donate-now')
       .addClass('clickable')
       .bind('click', function() {
         var $control = $('#donate-box');
         $control.toggleClass('expanded');
         $control.find('.toggle-content').slideUp("slow");
         $control.find('.toggle-content').slideDown("slow");
     });
     $(".t-shirt-size-selector").hide();
     $('input[name=os1]:radio').change(function() {
         var input=$(this);
         var value = input.val();
         if (value == "Yes") {
             $(".t-shirt-size-selector").show();
         } else {
             $(".t-shirt-size-selector").hide();
+        }
     });
     $('#amount').addClass("valid");
     $('#amount').on('input', function() {
     $('.amount').addClass("valid");
     $('.amount').on('input', function() {
         var input=$(this);
         var value = input.val();
         var errorElement=$("span", input.parent());
         var noCommaValue = value;
         noCommaValue = value.replace(/,/g, "");
         var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;
         var isValid = ( re.test(value) && parseInt(noCommaValue) >= 120);
         var isValid = ( re.test(value) &&
                         parseInt(noCommaValue) >= parseInt(input.attr("minimum")));
         if (isValid)  {
            input.removeClass("invalid").addClass("valid");
            errorElement.removeClass("form-error-show").addClass("form-error");
            $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+        }
         else {
             input.removeClass("valid").addClass("invalid");
             errorElement.removeClass("form-error").addClass("form-error-show");
+        }
     });
     $("#supporter-form-submit").click(function(event){
-	var valid = $('#amount').hasClass("valid");
+	var valid = $('.amount').hasClass("valid");
         if (! valid) {
             $("#form-correction-needed").removeClass("form-error").addClass("form-error-show")
                                         .css("font-weight", "bold").css("font-size", "150%");
 	    event.preventDefault();
         } else {
             $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+        }
     });
     /* Handle toggling of annual/monthly form selections */
     $('.supporter-type-selection#monthly').hide();
     $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
     $("a[href$='monthly']").bind('click', function() {
         $('.supporter-type-selection#annual').hide();
         $('.supporter-type-selection#monthly').show();
         $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
         $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
         $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
     });
     $("a[href$='annual']").bind('click', function() {
         $('.supporter-type-selection#annual').show();
         $('.supporter-type-selection#monthly').hide();
         $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
         $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
     });
     $( ".footnote-mark" ).tooltip({
         items: "a",
         hide: { duration: 5000 },
         position: {
             my: "center bottom-20",
             at: "center left",
             using: function( position, feedback ) {
                 $( this ).css( position );
                 $( "<div>" )
                     .addClass( "arrow" )
                     .addClass( feedback.vertical )
                     .addClass( feedback.horizontal )
                     .appendTo( this );
+            }
         },
         content: function() {
             return $('.footnote-1-text').text();
+        }
     });
 });
 $(window).load(function () {
     verifySelctionCorrectOnPageLoad = function() {

www/conservancy/static/supporter/index.html

➞

Show inline comments

@@ ... @@
 communities to work more effectively.  Check out <a
 href="https://copyleft.org/">copyleft.org</a>
 or sign up to join the <a
 href="http://sfconservancy.org/news/2014/aug/12/tax-exempt-working-group/">
 tax exempt working group</a>.</li>
 <li>we seek to solve problems for the public through free and open
 source
 software.  We've launched a <a href="http://npoacct.sfconservancy.org/">
 nonprofits accounting project</a> to help all
 nonprofits (in free software and in other fields) avoid paying millions
 of dollars in licensing fees for subpar accounting software.</li>
 <li>as part of Conservancy's partnership in the program, we support Karen as
   a co-organizer of the Free and Open Source Software Outreach Program.</li>
 <li>we encourage and support our employees to do volunteer work in the
     community.  For example, Bradley and Karen together host an oggcast
     called <cite><a href="http://faif.us">Free as in Freedom</a></cite> which
     discusses important legal and policy issues in open source and free
     software.</li></ul>
 <img class="appeal-footer" alt="*" src="/img/conservancy-supporter-heart.png"/>
 <p>As an organization, we try to do do everything transparently; even
 our
 <a
 href="https://gitorious.org/conservancy/policies/source/master:">
 internal policies</a> are published and available for scrutiny.</p>
 <p>Please <a href="#donate-box" class="donate-now">join our Supporter program</a> and spread software freedom!</p>
 <p class="footnote"><sup><a href="#return-footnote-shirts-when">1</sup></a><a id="footnote-shirts-when"></a><span class="footnote-1-text">The
     shirts will ship during Q1 2015.</div></p>
 <div class="supporter-type-selector">
 <hr/>
   <strong>Become a Supporter Now:</strong>  <a id="annualSelector" href="#annual">Annual</a> | <a id="monthlySelector" href="#monthly">Monthly</a></div>
 <div id="annual" class="supporter-type-selection">
 <h3>Join as an Annual Supporter</h3>
 <a id="annual"></a>
 <form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="supporter">
 <div id="supporter-form-inputs">
             <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />
             <input type="hidden" name="cmd" value="_xclick" />
             <input type="hidden" name="business" value="supporter@sfconservancy.org" />
             <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />
   <label for="amount"><strong>Amount:</strong> $</label>
-  <input id="amount" type="text" name="amount" size="7" value="120" />
+  <input class="amount" type="text" name="amount" size="7" minimum="120" value="120" />
   <span class="form-error"><small>$120 is a minimum for Conservancy
   Supporters.  <a href="/donate">Donate smaller amounts here</a>.</small></span><br/>
                       <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />
                       <input type="radio" name="os1" value="Yes" />Yes
                       <input type="radio" checked="checked" name="os1" value="No" />No
                       <br />
                       <span class="t-shirt-size-selector">
                       <label for="wantGift"><strong>T-shirt size: </strong></label>
                       <input type="hidden" name="on3" value="size"/>
                       <select name="os3" id="os3">
                         <option name="os3" id="os3" value="MenS">Men's S</option>
                         <option name="os3" id="os3" value="MenM">Men's M</option>
                         <option name="os3" id="os3" value="MenL">Men's L</option>
                         <option name="os3" id="os3" value="MenXL">Men's XL</option>
                         <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>
                         <option name="os3" id="os3" value="LadiesS">Ladies' S</option>
                         <option name="os3" id="os3" value="LadiesM">Ladies' M</option>
                         <option name="os3" id="os3" value="LadiesL">Ladies' L</option>
                          <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>
                       </select><br/></span>
                       <label for="publicAck"><strong>
                           Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>
                       <input type="hidden" name="on2" value="publicAck" />
                       <input type="radio" checked="checked" name="os2" value="Yes" />Yes
                       <input type="radio" name="os2" value="No" />No<br/>
                       <label for="joinList"><strong>Join Conservancy's
                       Low-Traffic Announcement Email List? </strong></label>
                       <input type="hidden" name="on4" value="joinList" />
                       <input type="radio" checked="checked" name="os4" value="Yes" />Yes
                       <input type="radio" name="os4" value="No" />No<br>
                       <br /></div>
                       <div id="supporter-form-submit">
                       <input type="image"
                              src="/img/supporter-payment-button-annual.png"
                              height="81" width="188"
                              border="0" name="submit" alt="Become an Annual Supporter Now!">
                       <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
 <br/><br/><small>Button above redirects to PayPal's site for credit
         card, bank account or PayPal balance payment methods.  Select options first.</small>
                       </div>
 </form>
 </div>
 <div id="monthly" class="supporter-type-selection">
 <h3>Join as an Monthly Supporter</h3>
 <a id="monthly"></a>
 <p>Monthly supporters will not receive any supporter benefits (including the t-shirt) until they've been
   monthly supporters for 12 months.</p>
 <form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
 <div id="supporter-form-inputs">
             <input type="hidden" name="business" value="supporter@sfconservancy.org" />
             <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
             <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />
             <input type="hidden" name="cmd" value="_s-xclick">
             <input type="hidden" name="cmd" value="_xclick-subscriptions">
             <input type="hidden" name="lc" value="US">
             <input type="hidden" name="no_note" value="1">
             <input type="hidden" name="t3" value="M" />
             <input type="hidden" name="p3" value="1" />
             <input type="hidden" name="src" value="1" />
             <input type="hidden" name="srt" value="0" />
             <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
             <input type="hidden" name="hosted_button_id" value="UU7VBCXYV7UPQ">
   <label for="amount"><strong>Monthly Amount:</strong> $</label>
   <input class="amount" type="text" name="a3" size="5" minimum="10" value="10" />
   <span class="form-error"><small>$10/month is a minimum for Conservancy
   Supporters.  <a href="/donate">Donate smaller amounts here</a>.</small></span><br/>
                       <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />
                       <input type="radio" name="os1" value="Yes" />Yes
                       <input type="radio" checked="checked" name="os1" value="No" />No
                       <br />
                       <span class="t-shirt-size-selector">
                       <label for="wantGift"><strong>T-shirt size: </strong></label>
                       <input type="hidden" name="on3" value="size"/>
                       <select name="os3" id="os3">
                         <option name="os3" id="os3" value="MenS">Men's S</option>
                         <option name="os3" id="os3" value="MenM">Men's M</option>
                         <option name="os3" id="os3" value="MenL">Men's L</option>
                         <option name="os3" id="os3" value="MenXL">Men's XL</option>
                         <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>
                         <option name="os3" id="os3" value="LadiesS">Ladies' S</option>
                         <option name="os3" id="os3" value="LadiesM">Ladies' M</option>
                         <option name="os3" id="os3" value="LadiesL">Ladies' L</option>
                          <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>
                       </select><br/></span>
                       <label for="publicAck"><strong>
                           Should we  <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>
                       <input type="hidden" name="on2" value="publicAck" />
                       <input type="radio" checked="checked" name="os2" value="Yes" />Yes
                       <input type="radio" name="os2" value="No" />No<br/>
                       <label for="joinList"><strong>Join Conservancy's
                       Low-Traffic Announcement Email List? </strong></label>
                       <input type="hidden" name="on4" value="joinList" />
                       <input type="radio" checked="checked" name="os4" value="Yes" />Yes
                       <input type="radio" name="os4" value="No" />No<br>
                       <br /></div>
                       <div id="supporter-form-submit">
                       <input type="image"
                       src="/img/supporter-payment-button-monthly.png"
                       height="81" width="188"
                       border="0" name="submit" alt="Become a Monthly Supporter Now!">
 <br/><br/><small>Button above redirects to PayPal's site for credit
         card, bank account or PayPal balance payment methods.  Select
                       options first.</small>
                       </div>
 </form>
 </div>
 <span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>
 </div>
 {% endblock %}

0 comments (0 inline, 0 general)