This has been written about many times before across a number of threads and I have finally managed to pull everything together into a working solution.

Why? The reason is I am based out of Australia and my clients do not like paying in US$ or paying the international shipping costs. I still love smugmug for the ability to show off my photos in their best light, so teaming smugmug with the paypal solution is the best of both worlds for me.

Since I have posted a few bits and pieces on paypal in different threads, I hope the code below pulls it together for everybody and is easy to understand. I am not necessarily an expert in HTML, Javascript or CSS so the code presented here is a result of much help from other dgrinners (so thank you to all).

Header Code
Place the following code in your header to create the product drop down and a buy now and view cart button. Where items are enclosed in [] replace with your own values (dont forget you need to create your own paypal account)

<div id="paypalButtonSet" style="display:none;" class="paypalButton">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="setPaypalForm(this)" >
  <input type="hidden" name="add" value="1">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="business" value="[PayPal Account ID]">
  <input type="hidden" name="item_name" value="">
  <input type="hidden" name="amount" value="">
  <input type="hidden" name="no_shipping" value="0">
  <input type="hidden" name="no_note" value="1">
  <input type="hidden" name="currency_code" value="AUD">
  <input type="hidden" name="lc" value="AU">
  <input type="hidden" name="bn" value="PP-ShopCartBF">
 
  <select ID="paypalSelect" name="photoselection">
    <option selected value="10.00">Product Option 1</option>
    <option value="20.00">Product Option 2</option>
  </select>
 
  <input ID="paypalBuy" type="image" src="[URL to Buy Button]" border="0" name="submit" alt="Buy">
  <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input ID="paypalView" type="image" src="[URL to View Cart Button]" border="0" name="submit" alt="View Cart">
  <input type="hidden" name="cmd" value="_cart">
  <input type="hidden" name="business" value="[PayPal Account ID]">
  <input type="hidden" name="display" value="1">
</form>
</div>

Bottom Javascript
Javascript function to create a URL for the image currently selected and pass back to Paypal.

/*========================================*/
/*==   Paypal shopping functionality    ==*/
/*========================================*/
function setPaypalForm(form) {
 urlToImage = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey + "/Large" + "   " + photoInfo[ImageID]['fileName']; 
 i = form.photoselection.selectedIndex
 
 sPhotoType = form.photoselection.options[i].text;
 sPhotoPrice = form.photoselection.options[i].value;
 urlToImage = urlToImage + "    " + sPhotoType ;
 form.item_name.value = urlToImage;
 form.amount.value = sPhotoPrice;
}

Top Javascript
Code to dyamically position the previously defined DIV into the altViews DIV i.e. placement on the screen.

/*=========================================*/
/*== Position Paypal -                                           ==*/
/*=========================================*/
YE.onContentReady("altViews", MovePaypalContent);
function MovePaypalContent()
{
    var paypalObj = document.getElementById("paypalButtonSet");
    var altViews = document.getElementById("altViews");
    var smugmug= document.getElementById("smugmug");
    if (altViews && paypalObj && smugmug)
    {
        var paypalSetObj = paypalObj.parentNode.removeChild(paypalObj);
        altViews.appendChild(paypalSetObj);
        paypalSetObj.style.display = "inline";
    }    
}

Hope it helps everybody and let me know if you have troubles (and I will offer what support I can).

Of course, you can check my website out to see it in action (still in some phases of redevelopment but at least paypal is working).

Cheers.

Well Done, Craig

I've added this to our wiki page!
http://wiki.smugmug.net/display/Smug...kout+or+Paypal

Originally Posted by Andy Well Done, Craig I've added this to our wiki page! http://wiki.smugmug.net/display/Smug...kout+or+Paypal

Andy! I love your whole site man! How much$$ so that you can transform mine like that ;)

Originally Posted by cheetaah Hi Andy, hope you can help me, I have lots of questions in another page, still waiting for help, but I have another question regarding paypal account, I have paypal account and I tried to add it, you have to look at it veeeery closely under my banner, ok I noticed it before but ignored it, once I press on it it says that I purchased it and the amount is $750.00 that's a huuuge amount, I had no idea I was purchasing it??? pleasehelp, what should I have to do? This is the page it's opening with my paypal email. https://www.paypal.com/us/cgi-bin/we...7b0ecd252eac84 I did not purchase it, all I wanted is to add paypal to my page, hope you can help me. Thanks

I dont quite understand what you are trying to say (the link you provided does not work as it appears to a session based URL).

Can you provide us a link to your site where you are having the problems and advise us of the steps you took and the problem you are having?

Originally Posted by cheetaah http://www.hasmigart.com/index.mg?viewBy=Galleries when you press right under the banner, I do not know if you can see it, it takes me to this page https://www.paypal.com/us/cgi-bin/we...7b0ecd252eac84 Hope this helps

What exactly are you trying to achieve when a user clicks the button under the banner? Having a quick look at the code on your website it is bahving exactly as the code you have is set to work - i.e. you have a description field in your code set as "DESCRIPTION OF WHAT IS BEING PURCHASED" and the price set as "750.00". When I click the button I get that description and price into a paypal basket.

If you can explain the behaviour you are after perhaps we can help.

Cheers.

I can not seem to get it to change from AU to US dollars..

HELP?!

Thanks! :)

Well, I added this to my galleries, and it works great accept there are a few problems with the gallery pages that it's on. First, when you click on a photo to view it, it shows up on the bottom rather than on the side, and looks really funky. How can I fix this? second, I was wondering if there was a way to align my buy and view cart buttons with the scroll down menu with my print prices? Thanks for any help!

Well, I added this to my galleries, and it works great accept there's one problem with the gallery pages that it's on. I was wondering if there was a way to align my "buy" and "view cart" buttons with the scroll down menu thats holding my print prices? Because If you look at one of my galleries, you'll see that they are just a tad bit higher than the scroll down menu. Thanks for any help!

I've just added this to my site, so far seems to all be good. Thanks Craig for putting this together.

Adding $ in place of $ signs in the drop down fixes the missing $ sign problem.

Originally Posted by fusionimaging Well, I added this to my galleries, and it works great accept there's one problem with the gallery pages that it's on. I was wondering if there was a way to align my "buy" and "view cart" buttons with the scroll down menu thats holding my print prices? Because If you look at one of my galleries, you'll see that they are just a tad bit higher than the scroll down menu. Thanks for any help!

Pop the code below in your CSS section and your buttons will be alinged perfectly.

/* Slight position adjustments for paypal buttons */
#paypalBuy {position: relative; top: 4px;}
#paypalView {position: relative; top: 4px;}

Originally Posted by Craig Ridley This has been written about many times before across a number of threads and I have finally managed to pull everything together into a working solution. Why? The reason is I am based out of Australia and my clients do not like paying in US$ or paying the international shipping costs. I still love smugmug for the ability to show off my photos in their best light, so teaming smugmug with the paypal solution is the best of both worlds for me. Since I have posted a few bits and pieces on paypal in different threads, I hope the code below pulls it together for everybody and is easy to understand. I am not necessarily an expert in HTML, Javascript or CSS so the code presented here is a result of much help from other dgrinners (so thank you to all). Header Code Place the following code in your header to create the product drop down and a buy now and view cart button. Where items are enclosed in [] replace with your own values (dont forget you need to create your own paypal account) <div id="paypalButtonSet" style="display:none;" class="paypalButton"> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="setPaypalForm(this)" > <input type="hidden" name="add" value="1"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="[PayPal Account ID]"> <input type="hidden" name="item_name" value=""> <input type="hidden" name="amount" value=""> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="AUD"> <input type="hidden" name="lc" value="AU"> <input type="hidden" name="bn" value="PP-ShopCartBF"> <select ID="paypalSelect" name="photoselection"> <option selected value="10.00">Product Option 1</option> <option value="20.00">Product Option 2</option> </select> <input ID="paypalBuy" type="image" src="[URL to Buy Button]" border="0" name="submit" alt="Buy"> <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1"> </form> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input ID="paypalView" type="image" src="[URL to View Cart Button]" border="0" name="submit" alt="View Cart"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="[PayPal Account ID]"> <input type="hidden" name="display" value="1"> </form> </div> Bottom Javascript Javascript function to create a URL for the image currently selected and pass back to Paypal. /*========================================*/ /*== Paypal shopping functionality ==*/ /*========================================*/ function setPaypalForm(form) { urlToImage = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey + "/Large" + " " + photoInfo[ImageID]['fileName']; i = form.photoselection.selectedIndex sPhotoType = form.photoselection.options[i].text; sPhotoPrice = form.photoselection.options[i].value; urlToImage = urlToImage + " " + sPhotoType ; form.item_name.value = urlToImage; form.amount.value = sPhotoPrice; } Top Javascript Code to dyamically position the previously defined DIV into the altViews DIV i.e. placement on the screen. /*=========================================*/ /*== Position Paypal - ==*/ /*=========================================*/ YE.onContentReady("altViews", MovePaypalContent); function MovePaypalContent() { var paypalObj = document.getElementById("paypalButtonSet"); var altViews = document.getElementById("altViews"); var smugmug= document.getElementById("smugmug"); if (altViews && paypalObj && smugmug) { var paypalSetObj = paypalObj.parentNode.removeChild(paypalObj); altViews.appendChild(paypalSetObj); paypalSetObj.style.display = "inline"; } } Hope it helps everybody and let me know if you have troubles (and I will offer what support I can). Of course, you can check my website out to see it in action (still in some phases of redevelopment but at least paypal is working). Cheers.

I have an account with paypal. I am a little confussed to what to put in the [] I made my values through the creat paypal button If I can see you [] then I think I can figure it out ?

Doing paypal this way means that it shows up in every gallery, right? Or, I believe that if I wanted this in only one gallery I could put the header code stuff in my gallery description,right? ? plus in the option in palpal, I would like to see my filename that is under the photos, could this be possible? thanks janis

Originally Posted by magicpic I have an account with paypal. I am a little confussed to what to put in the [] I made my values through the creat paypal button If I can see you [] then I think I can figure it out ?

There are three different places you need to put your own values in replacing the "[]". Two of these are URL's to your own buttons you want to show up for "Add to Cart" and "View Cart". The remaining item is your paypal account ID - I am using my email that I sign into paypal with or otherwise you can use your paypal account number.

Originally Posted by magicpic Doing paypal this way means that it shows up in every gallery, right? Or, I believe that if I wanted this in only one gallery I could put the header code stuff in my gallery description,right? ? plus in the option in palpal, I would like to see my filename that is under the photos, could this be possible? thanks janis

You are correct in that doing paypal this way shows it up in each and every gallery. The alternative as you say is to put it in the gallery description for each gallery or leave it as is and control the visibility of it on a per gallery basis through CSS.

I have not tried getting the specific filename before. I will need some time over the weekend to look at that one and see if I can find the answer for you.

Originally Posted by Craig Ridley There are three different places you need to put your own values in replacing the "[]". Two of these are URL's to your own buttons you want to show up for "Add to Cart" and "View Cart". The remaining item is your paypal account ID - I am using my email that I sign into paypal with or otherwise you can use your paypal account number. You are correct in that doing paypal this way shows it up in each and every gallery. The alternative as you say is to put it in the gallery description for each gallery or leave it as is and control the visibility of it on a per gallery basis through CSS. I have not tried getting the specific filename before. I will need some time over the weekend to look at that one and see if I can find the answer for you.

I FINALLY DID IT
TAKE A LOOK
http://www.photographybywidget.com/g...25320658_efNjU

Try this: change ..."lc" value="AU" to ..."lc" value="US"

Change the last part of your code under </select> to this:

<input ID="paypalBuy" type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input ID="paypalView" type="image" src="INSERT VIEW CART URL" border="0" name="submit" alt="View Cart">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="photowidget@comcast.net">
<input type="hidden" name="display" value="1">
</form></div>

The url you had in the space for the view cart image was a gallery code, not an image code.

Added for reference - the possible extension from Jerry for adding file names http://www.dgrin.com/showpost.php?p=772317&postcount=65

This might be helpful:
list of paypal variables:
https://www.paypal.com/IntegrationCe...reference.html


Add this to Footer:
******** type="text/javascript" language="javascript">
var albumtitlepp = YD.get('albumTitle').childNodes[0].innerHTML;
</********

Add this to javascript:
document.formname.on1.value = 'Album Title';
document.formname.os1.value= albumtitlepp + ' File Name: ' + mainPhotoFileName;

The on1 and os1 variables are set and used in the form for paypal.

Originally Posted by magicpic I have an account with paypal. I am a little confussed to what to put in the [] I made my values through the creat paypal button If I can see you [] then I think I can figure it out ? Doing paypal this way means that it shows up in every gallery, right? Or, I believe that if I wanted this in only one gallery I could put the header code stuff in my gallery description,right? ? plus in the option in palpal, I would like to see my filename that is under the photos, could this be possible? thanks janis

Ok, I think I have confused myself and made this more difficult than it is. I pasted the code from Craigs first post. I signed up for an account with PayPal and put the email addresses in the [ ], there is the [ ] left that I am supposed to past the URL for the view cart and buy buttons, but I am going to use the PayPal buttons and so I dont know what to use. I did past the info from the PayPal website, but it doesnt seem to work - Ive done something. Also, the /*==start paypal==*/ is now showing up at the top of my client galleries.
Can someone help? Thanks!

Quick question. If I use the PayPal option, am I now responsible for filling the print order too or does it still go through smugmug's print services?

Thanks!

Originally Posted by jocko Quick question. If I use the PayPal option, am I now responsible for filling the print order too or does it still go through smugmug's print services? Thanks!

You fill the print order yourself. When the customer places the order through paypal you are notified by email of the photo they are ordering. Its then up to you to print the photo (or have it printed) and mail it to the customer.

Ok, I'm having a problem.

My paypal links are now showing up on every page.... and I mean every page...

Any help??


Here's the site

www.trulyalaskan.com

Originally Posted by lorip Ok, I think I have confused myself and made this more difficult than it is. I pasted the code from Craigs first post. I signed up for an account with PayPal and put the email addresses in the [ ], there is the [ ] left that I am supposed to past the URL for the view cart and buy buttons, but I am going to use the PayPal buttons and so I dont know what to use. I did past the info from the PayPal website, but it doesnt seem to work - Ive done something. Also, the /*==start paypal==*/ is now showing up at the top of my client galleries. Can someone help? Thanks!

delete /*==start paypal==*/ from your gallery description, it will only be hidden with you put this code in your custom header. For the [] of the buy button, insert this:
https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif


And don't forget to delete the [] brackets after inserting.

In the future it helps to have a link to a specific gallery that you are working on.
Chris