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.
This commit is contained in:
Bradley M. Kuhn 2014-12-03 18:10:45 -05:00
parent 58f45a556b
commit e0f0ee820f
2 changed files with 20 additions and 8 deletions

View file

@ -42,15 +42,16 @@ $(document).ready(function() {
$(".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");
@ -62,7 +63,7 @@ $(document).ready(function() {
}
});
$("#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%");

View file

@ -140,7 +140,7 @@ internal policies</a> are published and available for scrutiny.</p>
<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/>
@ -194,10 +194,21 @@ internal policies</a> are published and available for scrutiny.</p>
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="return" value="https://sfconservancy.org/supporter/thank-you.html" />
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="business" value="supporter@sfconservancy.org" />
<input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
<input type="hidden" name="hosted_button_id" value="UU7VBCXYV7UPQ">
<input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />
<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" />
<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