Integration of Paypal into HTML page
I have a client who sells a jersey. She wants the prospect to be able to choose the size and color with the option of quantity for each.
I found a code that summarizes the total number of orders but does not have a quantity option.
I have attached the code below. Can anyone point me in the right direction on what to do about this? I'm new to setting up PayPal, but I'm a web designer, so I'm not starting to figure it out. I've also attached a screenshot of the customer form she emailed to show how she wants to look.
Any help would be greatly appreciated. Thank.
alt text http://www.inauguraldayt-shirts.com/shirt.jpg
<!-- Start of Script -->
<SCRIPT type=text/javascript>
<!--
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}function ReadForm (obj1, tst) { // process radio and checkbox
var i,j,amt=0,des="",obj,pos,val,tok,tag,
op1a="",op1b="",op2a="",op2b="",itmn="";
var ary = new Array ();
if (obj1.baseamt) amt = obj1.baseamt.value*1.0; // base amount
if (obj1.basedes) des = obj1.basedes.value; // base description
if (obj1.baseon0) op1a = obj1.baseon0.value; // base options
if (obj1.baseos0) op1b = obj1.baseos0.value;
if (obj1.baseon1) op2a = obj1.baseon1.value;
if (obj1.baseos1) op2b = obj1.baseos1.value;
if (obj1.baseitn) itmn = obj1.baseitn.value;
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "checkbox" || // checkboxes
obj.type == "radio") { // and radios
if (obj.checked) { // did user check it?
val = obj.value; // the value of the selection
ary = val.split (" "); // break apart
for (j=0; j<ary.length; j++) { // look at all items
// first we do single character tokens...
if (ary[j].length < 2) continue;
tok = ary[j].substring (0,1); // first character
val = ary[j].substring (1); // get data
if (tok == "@") amt = val * 1.0;
if (tok == "+") amt = amt + val*1.0;
if (tok == "%") amt = amt + (amt * val/100.0);
if (tok == "#") { // record item number
if (obj1.item_number) obj1.item_number.value = val;
ary[j] = ""; // zap this array element
}
// Now we do 3-character tokens...
if (ary[j].length < 4) continue;
tok = ary[j].substring (0,3); // first 3 chars
val = ary[j].substring (3); // get data
if (tok == "s1=") { // value for shipping
if (obj1.shipping) obj1.shipping.value = val;
ary[j] = ""; // clear it out
}
if (tok == "s2=") { // value for shipping2
if (obj1.shipping2) obj1.shipping2.value = val;
ary[j] = ""; // clear it out
}
}
val = ary.join (" "); // rebuild val with what left tag = obj.name.substring (obj.name.length-2); // get flag
if (tag == "1a") op1a = op1a + " " + val;
else if (tag == "1b") op1b = op1b + " " + val;
else if (tag == "2a") op2a = op2a + " " + val;
else if (tag == "2b") op2b = op2b + " " + val;
else if (tag == "3i") itmn = itmn + " " + val;
else if (des.length == 0) des = val;
else des = des + ", " + val;
}
}
}
// Now summarize stuff we just processed, above
if (op1a.length > 0) obj1.on0.value = op1a;
if (op1b.length > 0) obj1.os0.value = op1b;
if (op2a.length > 0) obj1.on1.value = op2a;
if (op2b.length > 0) obj1.os1.value = op2b;
if (itmn.length > 0) obj1.item_number.value = itmn;
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</SCRIPT>
<!-- End of Script -->
<div id="button">
<!-- Another method for the View Cart Form - add this code anywhere within the web page -->
<!-- This is the FORM to view the cart contents -->
<!-- Note: target="paypal" was replaced with the variable target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE and Firefox -->
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="viewcart" name="viewcart">
<p>
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<input type="hidden" name="business" value="you@you.com">
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/your_page.html">
</p>
</form>
<!-- End of the viewcart FORM -->
<!-- Start of Form -->
<!-- Note: target="paypal" was replaced with the variable target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE and Firefox -->
<FORM onsubmit="this.target='_self'; return ReadForm(this, true);" action=https://www.paypal.com/cgi-bin/webscr method=post>
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="you@you.com">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="amount" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/your_page.html">
<input type="hidden" name="cancel_return" value="http://www.yourwebsite.com/Cancel.html">
<input type="hidden" name="return" value="http://www.yourwebsite.com/Success.html">
<input type="hidden" value="0.00" name="baseamt">
<input type="hidden" value="Inaugural Day T-Shirt - @17.99" name="basedes">
Inaugural Day T-Shirt - $17.99
<br><br>
Colors
<br><br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="White +17.99"> White - $17.99
Select Quantity:
<select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Blue +17.99"> Blue - $17.99
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Black +17.99"> Black - $17.99
<br><br><br>
Sizes
<br><br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Small +17.99"> Small - $17.99
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Medium +17.99"> Medium - $17.99
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Large +17.99"> Large - $17.99
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="XL +19.99"> XL - $19.99
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="XXL +19.99"> XXL - $19.99
<br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="XXXL +19.99"> XXXL - $19.99
<br><br><br>
<input onclick="this.form.reset ();" type=button value="Reset Form"> Item Total >
<input class=nbor size=6 value=$0.00 name=tot>
<br><br>
<input type=image alt="cart add" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name=submit>
<br><br>
<input onclick="document.forms.viewcart.target = '_self'; document.forms.viewcart.submit (); return false;" type=image alt="cart view" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_LG.gif"">
</FORM>
<!-- End of Form -->
source to share
For a basic HTML page, use the Custom PayPal Account Button Wizard. Just go to Merchant Services menu → Add to cart. This will allow you to customize the button to specify different sizes using the dropdown and even select the quantity when the item is added to the cart. You can also add a View Cart button and everything will take care of you. I used this on a recent site.
Providing additional items and viewing the cart allows the user to navigate to the PayPal page, but if they are not looking for a fully integrated site, this option is fast, easy, and reliable. Plus PayPal is great at keeping track of where the order page is coming from and the user can navigate back easily.
source to share