How to have different shipping rates when using Paypal Hosted Buttons

Paypal web services allows you to specify a shipping rate when adding items to the cart by specifying an hidden input with the name set to shipping and the value set to the amount. The problem is that this doesn’t work when you are using hosted button’s which have shipping details already saved. Try it yourself. Set up a hosted button and then try using <input name=”hosted_button_id” type=”hidden” value=”abcdefghji”> and <input name=”shipping” type=”hidden” value=”0.0″> within the same form. You’ll find that the shipping input will be ignored and the settings you have setup in the hosted button will be used. So what is the solution?

Well if you have only a few products the solution may be to setup 2 hosted buttons per product. For instance let’s say we want a pickup option for which we don’t charge any shipping. We would setup a hosted button for the product with the shipping charges for delivery and then setup another button to use for pickup with shipping set to zero. Then by using javascript and more specifically in my case jQuery you can swap between the 2 hosted buttons depending on the selected delivery option. The following example is also using the jQuery UI:

First download and include the jQuery UI and jQuery scripts and css.

<link href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
<script src="javascript/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="javascript/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>

Then include the following script.
$(function(){
	//This turns divs with class radioset into buttons
	$('.radioset').buttonset();
		
	//This changes the selected hosted button id when a button is pressed 
	$('.radioset').change(function(){
						$(this).parent().children('input:hidden[name="hosted_button_id"]').val($(this).parent().find('input:radio:checked').attr("hbid")); 
 	});
});

Finally within your html code include the following.
<div class="radioset" style="font-size: 10px;">
        <input id="C1" hbid="newcartidfordelivery" name="product1" type="radio" value="Delivery"><label for="C1">Delivered</label>

        <input id="C2" hbid="newcartidforcollection" name="product1" type="radio" value="Collection"><label for="C2">Collect</label>

</div>

The jQuery code changes the value of the hosted_button_id input based on selected radio button’s hbid attribute, and therefore selects the appropriate shipping charge when the item is added to the cart.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks

1 thought on “How to have different shipping rates when using Paypal Hosted Buttons

Leave a Reply

Your email address will not be published. Required fields are marked *

*