Skip to content

PayPal Shopping Cart jQuery Integration

by on July 15, 2011

image

Script

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

var memberselection = “”;
var membername = “”;
var donationamt  =””;
$(“#membership_select”).change
(function(event){
$(“#membership_select option:selected”).each(function () {
memberselection = $(this).text();
memberselectionvalue = $(this).attr(‘value’);
});
//alert(“changed selection!”+memberselection);
//var str2 = $(“#membershipamount”).attr(‘value’);
//alert(“HIDDEN!”+str2);
$(“#membership”).attr(‘value’,memberselection+” Membership”);
$(“#membershipamount”).attr(‘value’,memberselectionvalue);
$(“span.items”).text(memberselection+” Membership: $”+memberselectionvalue);
});
$(‘#membershipname’).keyup(function() {
membername = $(this).attr(‘value’);
//alert(‘Handler for .keyup() called.’+membername);
$(“span.membername”).text( ” For “+membername);
$(“#membership”).attr(‘value’,memberselection+” Membership for “+membername);
});
$(‘#donationbox’).keyup(function() {
donationamt = $(this).attr(‘value’);
//alert(‘Handler for .keyup() called.’+donationamt);
$(“div.donation”).text( “Donation: $”+donationamt);
$(“#donationamount”).attr(‘value’,donationamt);
//var str2 = $(“#donationamount”).attr(‘value’);
//alert(“HIDDEN!”+str2);
});

});
</script>

Content

<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post” target=”_blank”>
<input type=”hidden” name=”cmd” value=”_cart” />
<input type=”hidden” name=”upload” value=”1″ />
<input type=”hidden” name=”image_url” value=”http://friendsofppl.org/Portals/0/images/FriendsOfPortlandPublicLibraryLogo.jpg” />
<input type=”hidden” name=”cpp_header_ image” value=”http://friendsofppl.org/Portals/0/images/FriendsOfPortlandPublicLibraryLogo.jpg” />
<input type=”hidden” name=”shopping_url” value=”http://www.friendsofppl.org/join.aspx” />
<input type=”hidden” name=”cancel_return” value=”http://www.friendsofppl.org/join.aspx” />
<input type=”hidden” name=”return” value=”http://www.friendsofppl.org/thankyou.aspx” />
<input type=”hidden” name=”currency_code” value=”USD” />
<input type=”hidden” name=”business” value=”tedspitzer@gmail.com” />
<input type=”hidden” name=”item_name_2″ value=”Membership” id=”membership”/>
<input type=”hidden” name=”amount_2″ value=”” id=”membershipamount”/>
<input type=”hidden” name=”item_name_1″ value=”Donation” id=”donation”/>
<input type=”hidden” name=”amount_1″ value=”0″ id=”donationamount”/>

<table cellpadding=”0″ cellspacing=”0″>
<tr>
<td><label for=”membership_select”>Membership Type</label> </td>
<td><div class=”selectdiv” ><select name=”membership_select” id=”membership_select” class=”formdropdownlist” style=”line-height:10px;border:0;”>
<option value=”0″ name=”selectone”>-Select one -</option>
<option value=”10″ name=”Individual”>Individual</option>
<option value=”15″ name=”Family”>Family</option>
<option value=”25″ name=”Business”>Business</option>
</select></div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan=”3″><div style=”font-size:8pt; padding-bottom:3px;”></div></td>
</tr>
<tr>
<td><label for=”membershipname”>Name on Membersip&nbsp;&nbsp;</label></td>
<td>
<input type=”text” id=”membershipname” class=”formtextbox” />
</td>
<td>&nbsp;<span style=”font-size:10pt;”>(optional)</span></td>
</tr>
<tr>
<td colspan=”3″><div style=”font-size:8pt; padding-bottom:20px;”>Individual, Family, or Business name you would like to appear on your membership.</div></td>
</tr>
<tr>
<td><label for=”DonationBox”>Donation Amount</label></td>
<td><input name=”DonationBox” id=”donationbox” type=”text” class=”formtextbox” /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan=”2″>
<div class=”summarydiv” >
<h3>Order Summary</h3>
<div class=”items”><span class=”items”></span><span class=”membername”></span></div>
<div class=”donation”></div>
</div>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan=”2″ style=”text-align:right;”><input type=”submit” value=”Donate & Join with PayPal > ” class=”simplelinkbutton” /></td>
<td>&nbsp;</td>
</tr>
</table>

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: