PayPal Community

3MP · ‎Sep-01-2017

I have a three part form that users must fill out before they make a payment. The first part is simply contact information, the second part determines the price (with a jQuery script), and the third part is other required information including an image. Two things to note are that the script I have implemented takes the numerical values and adds/multiplies them to calculate the total, and one of my form inputs is an image.

I referred to this article /t5/About-Business-Archive/Submit-a-form-with-a-Buy-Now-button/td-p/668755 to help me turn this form into a PayPal "readable" one, this way I can get all the information I need already included in the payment transaction details. The problem is, how do I set this up with all my different inputs? I have text fields, radio, checkboxes, and file inputs, and I also read here that there can only be up to six "on/os" options. Is there something I'm missing? Is it possible to gather all this information and if not what can I do?

<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="form">
<div id="contact">Contact Info
<input type="text" name="fname" placeholder="First Name*" required>
<input type="text" name="lname" placeholder="Last Name*" required>
<input type="text" name="company" placeholder="Company">
<input type="email" name="email" placeholder="Email Address*" required>
</div>

<div id="specifics">Specifics
<div id="page">Page
<br><input type="radio" name="pages" value="2" required><label for="pages">/home</label>
<br><input type="radio" name="pages" value="1.5"><label for="pages">/featured</label>
<br><input type="radio" name="pages" value="1.5"><label for="pages">/learnmore</label>
<br><input type="radio" name="pages" value="1.5"><label for="pages">/ads</label>
<br><input type="radio" name="pages" value="1"><label for="pages">/feature</label>
<br><input type="radio" name="pages" value="1"><label for="pages">/custom</label>
</div>

<div id="topbtm">Location
<br><input type="radio" name="location" value="top" required><label for="top">Top</label>
<br><input type="radio" name="location" value="btm"><label for="btm">Bottom</label>
</div>

<div id="selectiondiv">Selection
<br><label><input type="checkbox" name="selection" value="4"><span>1</span></label>
<label><input type="checkbox" name="selection" value="4"><span>2</span></label>
<label><input type="checkbox" name="selection" value="4"><span>3</span></label>
<label><input type="checkbox" name="selection" value="4"><span>4</span></label>
<label><input type="checkbox" name="selection" value="4"><span>5</span></label>
<label><input type="checkbox" name="selection" value="4"><span>6</span></label>
<br><label><input type="checkbox" name="selection" value="4"><span>7</span></label>
<label><input type="checkbox" name="selection" value="4"><span>8</span></label>
<label><input type="checkbox" name="selection" value="4"><span>9</span></label>
<label><input type="checkbox" name="selection" value="4"><span>10</span></label>
<label><input type="checkbox" name="selection" value="4"><span>11</span></label>
<label><input type="checkbox" name="selection" value="4"><span>12</span></label>
</div>

<div id="weeks">Number of Weeks
<br><select required><option value="" disabled selected>Please select one</option><option value="7">1 week</option><option value="14">2 weeks</option><option value="21">3 weeks</option><option value="28">4 weeks</option><option value="35">5 weeks</option><option value="42">6 weeks</option><option value="49">7 weeks</option><option value="56">8 weeks</option><option value="63">9 weeks</option><option value="70">10 weeks</option><option value="77">11 weeks</option><option value="84">12 weeks</option></select>
</div>
</div>

<div id="info">Info
<input type="file" name="image" value="image" accept="image/jpg,image/png" required>
<input type="url" name="url" placeholder="Linked Website (URL)" required>
<input type="text" name="color" placeholder="Background Color" required>
<input type="text" name="hovertext" placeholder="Hover Text (75 chars max)" maxlength="75">
</div>
<br>
<input type="checkbox" name="terms" required><div>&emsp;I have read and agree to the <a href="/terms">terms and conditions</a></div>

<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="(myemail)" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="item_name" value="Purchase" />
<input type="hidden" name="amount" id="total" value=""/>
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
</form>

Much help is appreciated, thank you.

Quandary · ‎Sep-06-2017

You would need a custom script to manage the data and sent it to the PayPal Checkout screens. (As you are combining Radio buttons and Check Boxes, this takes a bit of custome programming.)

Here's an example that uses both Radio Buttons and Check Boxes - it's only intended to provide you with what can be done through the use of custom scripting.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Button Example Code</title>

<!-- START META TAG SECTION -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<!-- END META TAG SECTION -->


<!-- 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's 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 --> 


</head>

<body>

<!-- START SAMPLE CODE SECTION -->


<!-- PARAGRAPH 1 -->
Script Examples

<br><br>

Pizza Order Form.

<br><br>

<!-- 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 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">
<!-- If using a Business or Company Logo Graphic, include the "cpp_header_image" variable. -->
<input type="hidden" name="cpp_header_image" value="https://www.yourwebsite.com/logo.jpg">
<p>
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<!-- Replace "business" value with your PayPal Email Address or your Merchant Account ID -->
<input type="hidden" name="business" value="your emailaddress.com">
<!-- Replace value with the web page you want the customer to return to -->
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/Script_02.html">
</p>
</form>
<!-- End of the viewcart FORM -->




<!-- Start of Form -->
<!-- Note: target="paypal" was replaced with target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE and Firefox -->
<FORM onsubmit="this.target='_self';&#10; return ReadForm(this, true);" action=https://www.paypal.com/cgi-bin/webscr method=post>
<!-- If using a Business or Company Logo Graphic, include the "cpp_header_image" variable. -->
<input type="hidden" name="cpp_header_image" value="https://www.yourwebsite.com/logo.jpg">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Replace "business" value with your PayPal Email Address or your Merchant Account ID -->
<input type="hidden" name="business" value="your emailaddress.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:btn/btn_cart_LG.gif:NonHosted">
<!-- Replace value with the web page you want the customer to return to -->
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/Script_02.html">
<!-- Replace value with the web page you want the customer to return to after a successful transaction -->
<input type="hidden" name="return" value="http://www.yourwebsite.com/ThankYou.html">
<!-- Replace value with the web page you want the customer to return to after item cancellation -->
<input type="hidden" name="cancel_return" value="http://www.yourwebsite.com/Cancel.html">
<input type="hidden" value="15.00" name="baseamt">
<input type="hidden" value="Widget Lg Plain Pizza - @15.00" name="basedes">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">

Widget Large Plain Pizza - $15.00
<br><br>
<img src="picts/pizza.jpg" width="200" height="150" alt="" border="0" align="">
<br><br>
Add Toppings
<br><br>  
<input onclick="ReadForm (this.form, false);" type=checkbox value="Pepp +1.50"> Pepperoni - Add $1.50
<br><br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="It Saug +1.50"> It Saugsage - Add $1.50
<br><br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Ons +1.10"> Onions - Add $1.10
<br><br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Mush +1.25"> Mushrooms - Add $1.25
<br><br>
<input onclick="ReadForm (this.form, false);" type=checkbox value="Gr Peppers +1.15"> Green Peppers - Add $1.15

<br><br><br>

Select Crust Style
<br><br>
<input onclick="ReadForm (this.form, false);" type=radio value="Neapolitan +0.00" name=rad>Neapolitan
<br>
<input onclick="ReadForm (this.form, false);" type=radio value="Deep Dish +2.35" name=rad>Deep Dish - Add $2.35
<br>
<input onclick="ReadForm (this.form, false);" type=radio value="Sicilian +2.50" name=rad>Sicilian - Add $2.50

<br><br><br>

Choose Delivery:&nbsp;&nbsp;
<input type="hidden" name="on0" value="Delivery">
<select name="os0">
<OPTION value="Store Pick-up - No Charge" selected>Store Pick-Up - No Charge</OPTION>
<OPTION value="Please Deliver - No Charge">Please Deliver - No Charge</OPTION>
</SELECT>

<br><br><br>

Choose Free Appetizer:&nbsp;&nbsp;
<input type="hidden" name="on1" value="Free Appetizer">
<select name="os1">
<OPTION value="Cheesey Bread Sticks" selected>Cheesey Bread Sticks</OPTION>
<OPTION value="Monster Onion Rings">Monster Onion Rings</OPTION>
</SELECT>

<br><br><br>


<input onclick="this.form.reset ();" type=button value="Reset Form">&nbsp; Item Total &gt;
<input class=nbor size=6 value=$15.00 name=tot> &nbsp;

<br><br>
<input type=image alt="cart add" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" name=submit>
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

<br><br>
<input onclick="document.forms.viewcart.target = '_self';&#10; document.forms.viewcart.submit ();&#10; return false;" type=image alt="cart view" src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
</FORM>


<!-- END BUTTON EXAMPLES -->



<!-- END SAMPLE CODE SECTION -->

<br><br><br><br>
<hr align="left" width="50%" noshade>
<br><br>
NOTES:
<br>
In order to test the code, you must replace the &quot;business&quot; value variable with your PayPal Email Address or your Merchant Account ID.

</body>
</html>

PayPal Community

How do I "convert" an HTML form with multiple input types to a PayPal payment form

Haven't Found your Answer?