Sample HTML Code for Add to Cart Buttons
Sample HTML Code for a Basic Add to Cart Button
The sample HTML code below illustrates a basic Add to Cart button with these features:
An item named "Birthday - Cake and Candle".
An item price of $3.95 USD.
PayPal calculates tax and shipping based on rates that you set up in your PayPal account.
The buyer's PayPal Shopping Cart opens in a separate browser window or tab.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for an Add to Cart Button With Product Options
The sample code below illustrates a basic Add to Cart button with a dropdown menu of product options.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Provide a dropdown menu option field, without prices. -->
<input type="hidden" name="on0" value="Color">Color scheme <br />
<select name="os0">
<option value="Select a color scheme">-- Select a color scheme -- <option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Yellow">Yellow</option>
</select>
<br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for an Add to Cart Button With Product Options With Prices
The sample code below illustrates a basic Add to Cart button with a dropdown menu of product options that have separate prices for each option. Only one of the dropdown menus in the set product options that your Add to Cart button offers can have prices.
Product options with prices specify the prices in two places:
The dropdown menu displays the prices for each option - buyers see the prices they pay for each option.
A list of hidden HTML variables repeats the prices for each option - PayPal uses these prices to charge buyers for the options they choose.
Dropdown menus with option prices use the following variables:
currency_code - sets the currency for option prices
item_index - identifies which dropdown menu of product option has prices
option_select* and option_amount* - repeats the prices for each option
Note: You cannot specify item IDs for production options with prices to have PayPal track inventory for your item. PayPal can track inventory by product option only for buttons that you save in your PayPal account.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify an Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="currency_code" value="USD">
<!-- Provide a dropdown menu option field. -->
<input type="hidden" name="on0" value="Color">Color scheme <br />
<select name="os0">
<option value="Select a color scheme"> -- Select a color scheme --</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Yellow">Yellow</option>
</select>
<br />
<!-- Provide a dropdown menu option field with prices. -->
<input type="hidden" name="on1" value="Size">Size <br />
<select name="os1">
<option value="Select a size">-- Select a size --</option>
<option value="2x4">2 x 4 - $3.95 USD</option>
<option value="3x5">3 x 5 - $4.95 USD</option>
<option value="4x6">4 x 6 - $5.95 USD</option>
</select>
<br />
<!-- Specify the price that PayPal uses for each option. -->
<input type="hidden" name="option_index" value="1">
<input type="hidden" name="option_select0" value="2x4">
<input type="hidden" name="option_amount0" value="3.95">
<input type="hidden" name="option_select1" value="3x5">
<input type="hidden" name="option_amount1" value="4.95">
<input type="hidden" name="option_select2" value="4x6">
<input type="hidden" name="option_amount2" value="5.95">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for an Add to Cart Button With Product Options as a Text Box
The sample code below illustrates a basic Add to Cart button with a text box for entering product options.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify an Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Provide the buyer with a text box option field. -->
<input type="hidden" name="on0" value="Size">Enter your size (S, M, L, X, XX) <br />
<input type="text" name="os0" maxlength="60">
<br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample HTML Code for Add to Cart Buttons that Open the Shopping Cart in the Merchant Window
By default, when buyers click Add to Cart buttons, the PayPal Shopping Cart opens in a separate browser window.
The sample HTML code below for an Add to Cart button illustrates how to open the PayPal Shopping Cart in the browser window that displays the merchant website.
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample HTML Code for Add to Cart Buttons that Continue Shopping on the Current Merchant Webpage
When buyers click Add to Cart buttons, the PayPal Shopping Cart page opens. Buyers can see the items in their carts, and they can begin checking out. In addition, buyers can click the Continue Shopping button to return to your website and add more items to their carts.
Use the shopping_url variable to specify which page PayPal returns buyers to when they click the Continue Shopping button. You can set the value of the shopping_url variable if you know the URL for the webpage where the button appears. In the code below, the merchant wants to ensure that buyers who click an Add to Cart button for a birthday card return to the product page for birthday cards when they want to continue shopping.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday Card - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Continue shopping on the webpage for birthday cards -->
<input type="hidden" name="shopping_url" value="http://www.kinskards.com/birthday_cards.html">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
With a more advanced coding technique, you can add JavaScript functions to your product pages that gets the current URL for the webpage from the browser and uses it as the value of shopping_url. Use this coding technique to make your button code more portable when you copy and paste buttons from webpage to webpage.
<script type="text/javascript">
<!-- function getContinueShoppingURL(form){ // -- Get the href of the currently displayed webpage -- form.shopping_url.value = window.location.href; } //-->
</script>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday Card - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Continue shopping on the current webpage of the merchant site. -->
<!-- The below value is replaced when buyers click Add to Cart -->
<input type="hidden" name="shopping_url" value="http://www.kinskards.com/birthday_cards.html">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" onclick=getContinueShoppingURL(this.form) src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for Add to Cart Buttons with a Flat Discount Amount
The sample HTML code below illustrates a basic Add to Cart button with these features:
An item named "Birthday - Cake and Candle".
An item price of $5.95 USD.
A $2.00 discount applies to the item.
PayPal calculates tax and shipping based on rates that you set up in your PayPal account.
The buyer's PayPal Shopping Cart opens in a separate browser window or tab.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Specify the discount amount that applies to the item. -->
<input type="hidden" name="discount_amount" value="2.00">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for Add to Cart Buttons with Multiple Discount Amounts
The sample HTML code below illustrates a basic Add to Cart button with these features:
An item named "Birthday - Cake and Candle".
An item price of $5.95 USD.
A $0.15 discount applies on the first item; $0.20 on the next 4 items.
PayPal calculates tax and shipping based on rates that you set up in your PayPal account.
The buyer's PayPal Shopping Cart opens in a separate browser window or tab.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Specify the discount amounts that apply to the item. -->
<input type="hidden" name="discount_amount" value="0.15">
<input type="hidden" name="discount_amount2" value="0.20">
<input type="hidden" name="discount_num" value="4">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for Add to Card Buttons with a Discount Percentage
The sample HTML code below illustrates a basic Add to Cart button that applies a 10% discount. This discount applies only to the first item regardless of the quantity purchased.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Specify the discount amount that applies to the item. -->
<input type="hidden" name="discount_rate" value="10">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for Add to Cart Buttons with Multiple Discount Percentages
The sample HTML code below illustrates a basic Add to Cart button that charges the normal price for the first item and applies a 10% discount for the next 9 items.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Specify the discount amounts that apply to the item. -->
<input type="hidden" name="discount_rate" value="0">
<input type="hidden" name="discount_rate2" value="10">
<input type="hidden" name="discount_num" value="9">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample Code for Add to Cart Buttons with a Buy One Get One Free Discount
The following HTML code uses the discount percentage variables to offer a "Buy one, get one free" discount. To receive the discount, the buyer must purchase two of the item; the second one is free (100% discount).
If the buyer purchases only one of the item, it is the full price. If the buyer purchases more than two, the second one is free and any additional items are full price.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Specify the discount amounts that apply to the item. -->
<input type="hidden" name="discount_rate" value="0">
<input type="hidden" name="discount_rate2" value="100">
<input type="hidden" name="discount_num" value="1">
<!-- Display the payment button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample HTML Code for a View Cart Button
View Cart buttons contain no payment information, so you do not need to take on precautions on securing them.
The value for the business variable must match a confirmed email address on file with your PayPal account, and it must match the value that you used for the business variables on your Add to Cart buttons.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart View Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<!-- Display the View Cart button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample HTML Code for a View Cart Button That Opens the Shopping Cart in the Merchant Window
By default, when buyers click View Cart buttons, the PayPal Shopping Cart opens in a separate browser window.You can simplify the shopping experience for you buyers by opening the PayPal Shopping Cart in the same browser window that displays the pages of your website.
The sample HTML code below for a View Cart button illustrates how to open the PayPal Shopping Cart in the same browser window as the merchant website.
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart View Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<!-- Display the View Cart button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
Sample HTML Code for View Cart Buttons that Continue Shopping on the Current Merchant Webpage
When buyers click View Cart buttons, the PayPal Shopping Cart page opens. Buyers can see the items in their carts, and they can begin checking out. In addition, buyers can click the Continue Shopping button to return to your website and add more items to their carts.
If your website has many product pages, browsers may have difficulty returning buyers to the same product pages that they leave when they click your View Cart buttons. Returning buyers to a different page, such as the home page of your website, degrades the shopping experience for buyers who want to add more items to their carts before checking out.
Use the shopping_url variable to let PayPal control which page buyers return to when they click the Continue Shopping button.
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="info@capleswebdev.com">
<!-- Specify a PayPal Shopping Cart View Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<!-- Continue shopping on the current webpage of the merchant site. -->
<input type="hidden" name="shopping_url" value="http://www.kinskards.com/birthday_cards.html">
<!-- Display the View Cart button. -->
<input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_LG.gif" alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
info@capleswebdev.com