Paypal Add to Cart button creation question

Posted on 2011-09-29
Medium Priority
Last Modified: 2013-11-19
Paypal - Add to cart button creation

On website's we've seen a Paypal button - created and delivered from Paypal - that allows a product purchaser to enter the number of items they wish to purchase.

This is entered into a textbox directly above the Paypal button.

As soon as a purchaser enters the quantity they wish to purchase the - Total Amount (i.e. Value of purchase) is calculated internally by the button codespec.

What Paypal seems to do is permit the button creator to embed a - single unit cost price - into the button codespec at creation time.

Then displays a textbox above the button that captures - Quantity Purchased.

The value entered into the textbox is then multiplied by the - Unit Price - embedded into the button codespec.

This value is then returned to Paypal as the amount to be paid by the purchaser.


Please take a look at the attached image, which indicates what we are trying to achieve.

This type of - Add to Cart - button can be created via Paypal's button creation webpage.

We really want to know, step by step, how to create such a button using Paypal's button creation webpage.

 Add to Cart Paypal Button
Question by:bayross
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
LVL 111

Expert Comment

by:Ray Paseur
ID: 36896657
Please tell us what web site you have seen this on.  Post the URL of the page that has it so we can see it in action, thanks.

Author Comment

ID: 36901530
Hi Ray,

Thank you for responding.

The website URL is: http://theessayexpert.com/services-rates/personal-statement-writing-help/

Do look at the - Custom Projects - Box.  

Apparently individuals can purchase a specific number of hours consultancy at a fixed hourly rate.  

When you reach your Paypal account to pay the  - Total Cost - for the hours are correctly displayed.

The button has been created using - Paypal's button creation system.

Somehow there is a relationship between the textbox content - i.e. No of hours, User entered - and the Button's - Hourly rate - mapped at the time of button creation in Paypal.

Any help will be appreciated.  We seem to be stuck.

LVL 111

Accepted Solution

Ray Paseur earned 1000 total points
ID: 36903023
In the code snippet you will see the HTML for the row that contains the Custom button.

See line 9.  This looks interesting but in practice it is pretty simple.  All that is going on is that PayPal receives a form field named "quantity" and does the math, unit_price x quantity = extended_price.  This is not mapped at the time of button creation; it is calculated at the checkout.  The form provides a default value of "1"

<input maxlength="2" name="quantity" size="2" type="text" value="1" /> hours</div>

<td valign="top"><strong>Custom Projects</strong><em>: </em>$150/hour</td>
<td valign="top">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" type="hidden" value="_s-xclick" />
<input name="hosted_button_id" type="hidden" value="KYTBJ98TPMYBL" />
<div class="inputbdr">
<input maxlength="2" name="quantity" size="2" type="text" value="1" /> hours</div>
<input class="imgWithoutBorder" alt="PayPal - The safer, easier way to pay online!" name="submit" src="http://www.theessayexpert.com/images/addtocart1.png" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" />&nbsp;<br />

Open in new window

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

LVL 111

Expert Comment

by:Ray Paseur
ID: 36903025
Sorry.  See line 8, not line 9.

HTH, ~Ray

Assisted Solution

bayross earned 0 total points
ID: 36909119
Hi Ray,

Thanks for your input.  It was very valuable for us.  We were trying to figure out how to create the Paypal button which included the textbox so that both became integral to the Paypal button code.

What I've understood from your reply is that all one needs to have in the web form is a text box whose Name is - Quantity.  

When the Paypal button is clicked, contents of the textboxes within the form are - Submitted - to Paypal.

When Paypal receives the contents of the - Quantity - text box Paypal does the Math.  Hence, if quantity is empty Paypal will understand that - One Unit - is being purchased, otherwise some very simple arithmetic is all that Paypal has to do to figure out the billable amount.

This really eluded us completely.  

Once again thank you for the trouble you taken to understand and reply to my query.  Truly appreciate this.

Author Closing Comment

ID: 36938100
We were over thinking this issue.  It took some plain and simple explanation from Ray to help understand what we should have seen in the first place.

We are very happy with the explanation and appreciate Ray's input.
LVL 111

Expert Comment

by:Ray Paseur
ID: 36909153
This may not be completely true:

if quantity is empty Paypal will understand that - One Unit - is being purchased,

In the example we looked at, the default value for quantity is 1 (one) which is different from empty.  It would be interesting to see what PayPal would do with an empty field, or perhaps with a negative value!

Best regards, ~Ray

Author Comment

ID: 36914640
Hi Ray,

Now that you've opened my mind to this, perhaps I could take out a little insurance and code a Javascript method that checks if the quantity field has been left as empty, if it is, then load the number - 1 - into it.  

If the quantity field has a negative signed number inserted by a site visitor then display an appropriate message to the site visitor and abort the Submit.

I'd have though that if Paypal, can give such button code away for free from their website, ( to make it as easy as possible for people to use the Paypal for payment ), they would have built this kind of intelligence into the Server side, code that handles the  value returned by the - Quantity - field.

BUT - I guess there is nothing like adding some fairly sensible client side data validation I guess.

Another issue that raises its head is if any site visitor has - Javascript - disabled in their Browsers, but that's not to tough to handle.

Thank you for drawing my attention this though.  I guess I was taking Paypal a bit - For Granted.


Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question