Tuesday, July 12, 2011

Creating an Add to Cart button

How to turn your PayPal Website Payments Button into an "Add to Cart" button for use with PayPal's Shopping Cart.<div><p><span class="emphasis">Before you begin:</span>

Unlike a PayPal Website Payments button, where all fields are optional, the PayPal Shopping Cart requires the item_name and amount fields. If you did not use either of these fields when you created your PayPal Website Payments button, please create new buttons via the PayPal Button Factory.

The current HTML code for your PayPal Website Payments button should look similar to this:

</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular "><form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="payments@yoursite.com">
<input type="hidden" name="item_name" value="Baseball Hat">
<input type="hidden" name="item_number" value="123">
<input type="hidden" name="amount" value="5.95">
<input type="hidden" name="shipping" value="1.00">
<input type="hidden" name="shipping2" value="0.50">
<input type="hidden" name="handling" value="2.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="http://www.yoursite.com/thankyou.htm">
<input type="hidden" name="undefined_quantity" value="1">
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but23.gif" border="0" name="submit" width="68" height="23" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
</td></tr></tbody></table><p>
To transform the PayPal Website Payments code above into an 'Add to Cart' button:

<span class="emphasis">1. </span>Copy your Buy Now Buttons code from your website into a text editor.

<span class="emphasis">2. </span>Add target="paypal" to the </p><form> tag:

<p></p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular ">target="paypal"></td></tr></tbody></table><p>

<span class="emphasis">3. </span>Find this line in your code:
</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular "><input type="hidden" name="cmd" value="_xclick"></td></tr></tbody></table><p>

<span class="emphasis">4. </span>Replace "_xclick" with "_cart":

</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular "><input type="hidden" name="cmd" span="" class="emphasis">value="_cart"></td></tr></tbody></table><p>

<span class="emphasis">5. </span>Add the following line somewhere between the tags:
</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular "><input type="hidden" name="add" value="1"></td></tr></tbody></table><p>

<span class="emphasis">6. </span>Find the "input type=image" line in your code:
</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular "><input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but23.gif" border="0" name="submit" width="68" height="23" alt="Make payments with PayPal - it's fast, free and secure!"></td></tr></tbody></table><p>

<span class="emphasis">7. </span>Replace the "input type=image" line with:
</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular "><input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!"></td></tr></tbody></table><p>

<span class="emphasis">8. </span>Your code should now look similar to the code below:
</p><table class="tableDarkGreyBorder " align="center" cellpadding="5" width="500"><tbody><tr class="codeSample "><td class="tableCellRegular ">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="payments@yoursite.com">
<input type="hidden" name="item_name" value="Baseball Hat">
<input type="hidden" name="item_number" value="123">
<input type="hidden" name="amount" value="5.95">
<input type="hidden" name="shipping" value="1.00">
<input type="hidden" name="shipping2" value="0.50">
<input type="hidden" name="handling" value="2.00 ">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="http://www.yoursite.com/thankyou.htm">
<input type="hidden" name="undefined_quantity" value="1">
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!">
</td></tr></tbody></table><p>

<span class="emphasis">9. </span>Remove the original PayPal Website Payments HTML code and paste the code you just created into your website's HTML code. A PayPal 'Add To Cart' button will appear on your website instead of your original Single Item Purchase button.

<span class="emphasis">10. </span>To complete your implementation of the PayPal Shopping Cart, you will still need to add a 'View Cart' button to your website.</p></form></div>