Multiple Products Order Form For PayPal (a $79 PayPal e-commerce software solution)

The multiple product order form method presented here allows you to have a list of products with either checkboxes to check or text areas where the customer types in quantities.

When the form is submitted, Master Form V4 adds up the total, sends an email to you with all the order details, and sends the customer to PayPal for payment. It does not require cookies. And it can work with or without JavaScript.

The system requires four files:

1. The Master Form V4 program script installed on your server.

2. The order form that the customer will use.

3. A template email that Master Form V4 will use to generate the order details email sent to you.

4. A template web page form where Master Form V4 will plug in the order total and possibly other information. If the customer's browser is JavaScript-enabled, this web page form is then automatically submitted to PayPal. Otherwise, the customer must click a button to submit.

The Master Form V4 Program

If you don't already have Master Form V4 installed on your server, it can be purchased here

Verify that you have the latest version installed (at least 3.5i of August 15, 2004) because earlier versions don't handle blank form fields correctly when calculating the values of MATH placeholders.

The Order Form

At the demonstration page is an order form with three products, each with a box for quantity.

Hidden fields in the order form tell Master Form V4 where to find the template email file and the template web page form file (see below).

There are two visually identical forms.

The first form has no JavaScript. This is for demonstrating the simplicity of the system. You'll see that it's a normal web page form, no special coding required.

The second form contains JavaScript and a "total" form field is updated whenever a quantity is changed. If your browser is not JavaScript-enabled, you'll see the note "Total is presented at the PayPal payment page" instead of the total form field.

This article is not a JavaScript tutorial, but I did want to mention that shipping and taxes might also be calculated and respective form fields automatically updated.

The Template Email

The demonstration page has a download link that will download a ZIP file containing all non-program files required to implement the demonstration, including an email template file. (The Master Form V4 program file is not included because a license needs to be purchased before using it.)

When the order form is submitted, Master Form V4 grabs the template email file, replaces any placeholders it finds, and emails the result.

In the email template, you can include placeholders for the quantity of every item on your order form.

If you use the [[SYSTEMTIME]] placeholder for a receipt or order or item number, and use the same placeholder in the template web page below, then, when the PayPal payment notification arrives, you can correlate the number and know exactly what the customer ordered.

The template email can contain the total order amount by using the Master Form V4 MATH placeholder.

The Master Form V4 manual, linked to from here, has more information about email templates and the MATH placeholder.

The Template Web Page

When the order form is submitted, Master Form V4 first handles the email, then it grabs the template web page file, replaces any placeholders it finds, and displays the result in the customer's browser.

If the customer's browser is JavaScript enabled, the order information can be submitted to PayPal automatically. Otherwise, the customer must click an image or a button.

The download has an example template web page, but you'll still need to make your own.

Create a blank web page with an empty BODY area. This is the start of your template web page.

Next, log in to PayPal and generate a "buy now" button to paste into the empty BODY area.

As of this writing, that would be the "Merchant Tools" tab, then click on the "Buy Now Buttons" link in the "Website Payments" section.

In the section labeled "Enter the details of the item you wish to sell (optional)":

For "Item Name/Service" specify "Multiple Items" or anything else that makes sense for your particular order form products or services.

For "Item ID/Number" you can specify [[SYSTEMTIME]] (with the double square brackets) if you want Master Form V4 to assign a 10-digit number for the ID. (The number represents the number of seconds elapsed since January 1, 1970.) If you do not want Master Form V4 to assign a 10-digit number, specify what it is that you want the Item ID/Number to be, which ID would be on every order submitted.

For "Price of Item/Service you want to sell" type something that you will recognize, like 11.11 -- this will be replaced later with a MATH placeholder.

Skip the section labeled "Choose a button to put on your website (optional)".

In the section labeled "Security Settings", check "no" so the payment button is not encrypted.

If you have sales tax or shipping costs that you want PayPal to calculate for you, allow the customer to write a note to you, or other available options, click the "Add More Options" button.

Once all applicable information is specified, click the "Create Button Now" button.

Copy the generated HTML source code and paste it into your template web page.

One edit must be done. And another may be done.

The edit that must be done is replacing the value in the hidden field name="amount" with a MATH placeholder. The demonstration contains an example and the Master Form V4 manual has detailed information.

When the order form is submitted, Master Form V4 replaces the MATH placeholder with the result of the math you specify, which would be the amount of the order.

After you've done the above edit that must be done, you may wish to do the following edit.

This edit replaces the "buy now" button generated by PayPal with customer instructions and a regular form button (a regular form button instead of the image because it loads much faster). Then, add some JavaScript that automatically submits the information in the PayPal-generated form.

This requires three steps:

1. Locate the FORM tag, which is the first line of the PayPal-generated code. In the FORM tag, insert this:

   name="PayPalForm"
   

2. In the PayPal-generated form, find the type="image" input field, which is probably the second from last line.

   Remove that field and replace it with

   <h3>Sending order information to PayPal.</h3>
   <h4>If you don't see the PayPal page soon, 
   <input type="submit" value="Click here."></h4>
   

3. Below the last line of the PayPal-generated form, which would be immediately below the tag, insert this Java:

   <script type="text/javascript" language="JavaScript">
   <!--
   setTimeout('document.PayPalForm.submit()',1500);
   //-->
   </script>
   

With those three changes, the form will automatically submit for JavaScript-enabled browsers. And those without JavaScript have instructions to click on the button.

Once you have the multiple products order form working, it can work for you without further attention until you need to change products, prices, etc.

Will Bontrager