Use Google Checkout to create PACKAGES and offer COUPON CODES!

DrDavid

I know this has been posted (sortof) before, but, I wanted to document what I did for future reference, and, of course, to help others.

I wanted to offer *package prices* to customers for my little league photos. I wanted this to be EASY to do, and unobtrusive to clients.

So, I found the thread on using PayPal as a purchase now option, but, it wasn't good enough for what I wanted. So, I decided to spend a while to figure it all out. At last, I have a good solution, that works with the new security keys. AND... Without further ado, here's the outcome...

I've been able to integrate Google Checkout into each gallery I wanted, and have multiple drop-down pre-defined package deals. When the customer clicks the google checkout button while viewing the image they want (in smugmug style [or any other style]), it will automatically create go to Google Checkout with the right price, *AND* a URL of the image *AND* the filename of the photo. So, I can find it via. the URL and place the order via. Smugmug, or fulfill via. some other method with the actual filename picture # I use on my own harddrive.

Let me be clear: You place the google buy now button in the Gallery Description, footer or header -- ONCE, and it will automatically figure out what photo you are looking at when you click "Buy Now!" You do NOT need to place this in the caption of each photo, you don't need to go to each gallery in turn (if placed in the footer), etc.. This is a totally automatic Google Checkout system

Ok, here's what you do...

Add this to your Javascript section:

function setBB_BuyButtonForm(form) {
 urlToImage = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey + "/Large" + "   " + photoInfo[ImageID]['fileName']; form.item_option_description_1.value = urlToImage;
 form.item_option_description_2.value = urlToImage;
 form.item_option_description_3.value = urlToImage;
 form.item_option_description_4.value = urlToImage;
}

Notice, I have four lines (ascending #'s.. 1, 2, 3, 4... If you have more than 4 selections, add a new line with a new number for each selection....) For example, if you have 5 options, add one more line.

Then, go to google and create your drop-down checkout button. Here's the secret.. Leave the optional description BLANK. Then, change the first line by adding " onSubmit="setBB_BuyButtonForm(this)" ".. It'll look SOMETHING like this:

< form action="https://checkout.google.com/cws/v2/Merchant/XXXX/checkoutForm" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" onSubmit="setBB_BuyButtonForm(this)" >

Add the WHOLE code, including the change you just made to the gallery description, or captions. You can also add it to the footer and use CSS to control it, but you'll need to create a new div class and then add a bit of CSS to specify which galleries to show it on. I'll post how to do it later if there's a need.

I also surrounded the form code with "< center >" tags to make it prettier.

You can see a working copy here:

http://www.wolfsnap.com/gallery/3869595_k8cSx#224158606

Try to order a photo, and you'll see that the description is created automagically based on the photo you're viewing

Oh.... Coupon codes.. Google Checkout natively supports coupon codes. So, check it out!

Hope this is helpful to someone!

David

Edit: ImageKey is fixed in all templates, so, I've fixed the code to make use of that.

DrDavid

Hm, for some reason the photo filename only shows up if you have the gallery customization set to use the filename as the default caption. I'm thinking I'm using the wrong call to get the filename on other galleries. Anyone know how to fix that?

Otherwise, works 100% great!

jerryr

Hi - I have built some paypal shopping cart logic for some smuggers.
I have the gallery style set to 'traditional' or 'all thumbs' and use this code to obtain the file name:

document.PhotoOrderFormspt.paypalfilename.value=mainPhotoFileName;

thus, I grab file name from the JS variable mainPhotoFileName

I have the file name displayed set to yes as well.

I hope this information is helpful - jerryr

GJMPhoto

Multiple pictures in a package???
Can this be changed to allow multiple pics to be placed in a package?

For example:

Package #1: 1 8x10, 2 5x7, 8 Wallets

Let the 8x10 be IMG_123, the 2 5x7s IMG_456; and the wallets IMG_789

????

- Gary.

DrDavid

GJMPhoto wrote:

Can this be changed to allow multiple pics to be placed in a package?

For example:

Package #1: 1 8x10, 2 5x7, 8 Wallets

Let the 8x10 be IMG_123, the 2 5x7s IMG_456; and the wallets IMG_789

????

- Gary.

I thought about this... You would need some sort of external shopping cart handler, then integrate it with Google Checkout. They exist; but, I don't know where they are.

If you wanted to do "Choose 2 pictures, and here's your package" type thing.... I'd probably create a form and have the customer enter the IMG#'s themselves and then complete the google checkout. It's not a bad idea, so, I might hack something up later to do that.

David

GJMPhoto

DrDavid wrote:

I thought about this... You would need some sort of external shopping cart handler, then integrate it with Google Checkout. They exist; but, I don't know where they are.

If you wanted to do "Choose 2 pictures, and here's your package" type thing.... I'd probably create a form and have the customer enter the IMG#'s themselves and then complete the google checkout. It's not a bad idea, so, I might hack something up later to do that.

David

Yeah...I had been thinking about the same thing. I am using dynamic Google Buy-Nows as well...using a form to let them fill it in and having the buynow dynamically represent what was chosen...but multiple select of photographs within Smugmug is the problem.

I'd be interested in whatever you come up with on this...

- Gary.

DrDavid

I think I have shipping cost calculations nailed... Basically, you add..

< input type="hidden" name="ship_method_name_1" value="UPS Air"/>
  < input type="hidden" name="ship_method_price_1" value="19.99"/>
  < input type="hidden" name="ship_method_us_area_1" value="FULL_50_STATES"/>

But, I'll post a more detailed description later, and hopefully a more detailed option <img src="https://us.v-cdn.net/6029383/emoji/thumb.gif&quot; border="0" alt="" > BUT, multiple pics/items without full access to the webserver might be VERY hard. I even looked at PayPal, and while they'll do multiple items in a shopping cart, you can't have multiple prices (i.e. multiple packages) per item in a multi-item shopping cart. Too bad :cry

DrDavid

Ah ha! I think I have this figured out.. It will be a form, but, it'll link to Google.. Give me time to get it to work

jerryr

Hi -
Here is what I did for a couple of sites I customized.
In the form using the paypal cart, I set up a drop down.
In the drop down, The packages would be listed as follows:
Example:

Package #1 - 1 11x10 ($100)
Package #1 - 2 5x7s ($0)
Package #1 - 10 Wallets ($0)

Thus, the customer would select the Package #1 - 1 11x10 and a $250 line item would be in the cart with the file name and link to the appropriate image. Then, the customer would select the Package #1 - 2 5x7 with the appropriate image for the package and the line items would be in the cart, with an amount of $0 for the line item. Then, the customer would select the Package #1 - 2 10 Wallets with the appropriate image for the package and the line items would be in the cart, with an amount of $0 for the line item. The paypal cart has to have a total amount greater than $ .01.

When the customer checks out, an e-mail sent to the photographer and the customer with the information for each line item of the package - the item name, the image link and the image file name.

Seems to work like a charm - jerryr

jerryr

Hey DrDavid - thanks for your help
I am using the paypal shopping cart method.

I tried to make a modification to show the 'filename'

from this:


document.PhotoOrderFormev.paypalfilename.value=mainPhotoFileName;

to this:


document.PhotoOrderFormev.paypalfilename.value=photoInfo[ImageID];


And unfortunately it did not work.
* the mainPhotoFileName works for the style 'all thumbs' and 'traditional' but not for 'smugmug'
* do I need any settings on for the 'fileName' to work ?

I am attempting to get the 'fileName' variable to work in the 'smugmug' style.

Any help work be greatly appreciated.

thanks - jerryr

DrDavid

jerryr wrote:

Hey DrDavid - thanks for your help
I am using the paypal shopping cart method.

I tried to make a modification to show the 'filename'

from this:


document.PhotoOrderFormev.paypalfilename.value=mainPhotoFileName;

to this:


document.PhotoOrderFormev.paypalfilename.value=photoInfo[ImageID];


And unfortunately it did not work.
* the mainPhotoFileName works for the style 'all thumbs' and 'traditional' but not for 'smugmug'
* do I need any settings on for the 'fileName' to work ?

I am attempting to get the 'fileName' variable to work in the 'smugmug' style.

Any help work be greatly appreciated.

thanks - jerryr

Do you have the option under Look & Feel "Filenames" turned ON? If it's off, it doesn't work. You must have it turned ON.

David

jerryr

Yep - its on Is there anything else you can think of.
Again, the mainPhotoFileName variable works with thumbnails and traditional styles, not smugmug.

Thanks for your attention to this - jerryr

DrDavid

jerryr wrote:

Yep - its on Is there anything else you can think of.
Again, the mainPhotoFileName variable works with thumbnails and traditional styles, not smugmug.

Thanks for your attention to this - jerryr

I'm at a loss.. It should work. It works for me!

mainphotofilename won't work in smugmug style.. It'll only show the first image's filename.

Argh.. I just tested it right now in a different album, and it's not working there. I swear it worked yesterday!

Ok, this is strange.. In one album, when I add the code it works. In another, it doesn't. There's no difference in the code, other than it's not working in one... I'm completely confused too! I need to go through the source of the page again and find why it's different.

DrDavid

AHHHH!!! I figured it out.. For some strange reason in the album that it doesn't work, there is NO filename in the exif. So, it works, but, there's just nothing to show.

I'm guessing it's the WAY it was uploaded... I use S*E or Lightroom (plugin) to upload. But, the gallery I just tested was done a while ago via. Photoshop Album. How are you uploading your files?

*Edit*: Just confirmed another gallery.. That's what happened. Somehow some files had their filenames stripped on upload. Odd.. But, the code I gave you worked *everywhere* that the EXIF filename field had info available to show.

David

jerryr

Hi -
Ok - I turn on the EXIF option on the gallery.
http://www.jrphotosandwebdesign.com/gallery/4189903_qmZsG

Still no luck showing the photoInfo[ImageID]

Here is the code in my footer (minus the **)

<** div id="testfooter" align="center">
<** script type="text/javascript">
document.write("The photoInfo value for the image is: ");
document.write(photoInfo[ImageID]);
document.write("<br>");
document.write("The AlbumID and AlbumKey for the image is: ");
document.write(AlbumID + "_" + AlbumKey);

<** /********
<** /div>

DrDavid

Updated for the new bug fixes.

Craig Ridley

DrDavid wrote:

Updated for the new bug fixes.

It is a real shame Google Checkout is not available for Australian sellers yet. Perhaps I can get this to work with PayPal.

Now the next challenge would be to see if you can allow somebody to add images to a cart, keep shopping and then finish by going through Google Checkout.

DrDavid

Craig Ridley wrote:

It is a real shame Google Checkout is not available for Australian sellers yet. Perhaps I can get this to work with PayPal.

Now the next challenge would be to see if you can allow somebody to add images to a cart, keep shopping and then finish by going through Google Checkout.

I found a cart that I could use, but, I'm missing ONE feature--the ability to insert the URL into the order. Otherwise, it would be PERFECT. They tell me that that feature is coming.

The site I found is http://www.mercantec.com/ it's free, and very powerful (it's how I do my printer calibration order page. You can see a demo of some of the features there too.. http://www.wolfsnap.com/color .)

I'm still trying

David

Craig Ridley

Thank You!
I have been looking to implement a paypal shopping cart system in order to replace the smugmug cart as unfortunately not living in the US, there are a couple of issues with the smugmug cart including foreign currency, international shipping costs and payment via US$ cheque that my bank would take significant chunk.

As such I have been following this thread in detail to get tips on implementing my own paypal self-fulfilment type cart. I know my cart does not implement coupons or packages, but this thread has still helped enormously - so thanks to all for their assistance!

I am still testing, but all is looking good. I have implemented in one gallery only at the moment as follows:

http://www.craigridley.com/gallery/4090880

The remaining things I need to do from a styling perspective are:

1) Take the div out of the gallery description and work out how best to set it up to be positioned best on the site for all gallery pages but be dynamic when pages are resized etc

2) Align the drop down box and the two images.

I am not a CSS guru so I will most likely put this out to the customization forum if I can not work it out over the next day or so.

Again, thanks for the tips in this thread. They have saved me!

DrDavid

Craig Ridley wrote:

Again, thanks for the tips in this thread. They have saved me!

Actually, I've had a working PayPal cart for a bit. It was sent to me by someone else, that asked that I not post it. But, it does something similar to what you've done. You can see my paypal implementation at: http://www.wolfsnap.com/gallery/4397759_6zxgR

stlracing

DrDavid wrote:

Actually, I've had a working PayPal cart for a bit. It was sent to me by someone else, that asked that I not post it. But, it does something similar to what you've done. You can see my paypal implementation at: http://www.wolfsnap.com/gallery/4397759_6zxgR

I'd like to have that paypal implementation as well.....

Markjay

No expert here but....
Just trying to be helpful here......


If I go to this site page
http://www.craigridley.com/gallery/4090880

I see TWO payment systems..... confusing
Which one does one click on Buy Photo or Buy Buttons?

When I DO click the Smugmug Buy Photo button, all I see is an empty cart system with some message that says "wrong permissions". What the heck does that mean to a buyer when a smugmug pro account user (like me) can't figure it out? Not good.

That's all from Florida :-)
I haven't even begun to think about implementing a buy button system yet, I'm still reading and reading posts to learn as much as I can about different options and looks before I jump in.

Happy Friday!




The remaining things I need to do from a styling perspective are:

1) Take the div out of the gallery description and work out how best to set it up to be positioned best on the site for all gallery pages but be dynamic when pages are resized etc

2) Align the drop down box and the two images.

I am not a CSS guru so I will most likely put this out to the customization forum if I can not work it out over the next day or so.

Again, thanks for the tips in this thread. They have saved me![/quote]

Craig Ridley

Markjay wrote:

Just trying to be helpful here......

No problems at all. I completely agree with what you said and really only have the two options on this particular gallery as I keep testing and working through my options. When I determine which way I am going to go, I will only have one choice available - smugmug cart or paypal cart.

Still work in progress, so this is really my test gallery at the moment. I will post the code separately in case you decide to take the plunge and implement your own.

Craig Ridley

stlracing wrote:

I'd like to have that paypal implementation as well.....

Here is the code I used to get it all working. Hope it helps.

javascript:

/* 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;
}

HTML (I have this in my gallery description at the moment - remove spaces where required):

< div class="paypalButton">
< form target="paypal" action="[URL="https://www.paypal.com/cgi-bin/webscr"]https://www.paypal.com/cgi-bin/webscr[/URL]" 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="[EMAIL="orders@craigridley.com"]orders@craigridley.com[/EMAIL]">
  < 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 name="photoselection">
  < option selected value="5.00">4" x 6"   - Lustre (AU$5.00)</OPTION>
  < option value="7.00">5" x 7"   - Lustre (AU$7.00)</OPTION>
  < option value="20.00">8" x 10"  - Lustre (AU$20.00)</OPTION>
  < option value="30.00">8" x 12"  - Lustre (AU$30.00)</OPTION>
  < option value="50.00">12" x 18" - Lustre (AU$50.00)</OPTION>
  < option value="60.00">16" x 24" - Lustre (AU$60.00)</OPTION>
  < option value="70.00">20" x 30" - Lustre (AU$70.00)</OPTION>
< /select>
  < input type="image" src="/photos/259750608_aULWy-O.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
  < img alt="" border="0" src="[URL="https://www.paypal.com/en_AU/i/scr/pixel.gif"]https://www.paypal.com/en_AU/i/scr/pixel.gif[/URL]" width="1" height="1">
< /form>
< form target="paypal" action="[URL="https://www.paypal.com/cgi-bin/webscr"]https://www.paypal.com/cgi-bin/webscr[/URL]" method="post">
  < input type="image" src="/photos/259750602_CHSNN-O.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
  < input type="hidden" name="cmd" value="_cart">
  < input type="hidden" name="business" value="[EMAIL="orders@craigridley.com"]orders@craigridley.com[/EMAIL]">
  < input type="hidden" name="display" value="1">
< /form>
< /div>
<FORM action="<a href=" target=paypal p webscr? cgi-bin href="http://www.paypal.com" code]< [></FORM>

<A href="mailto:you@home.com">

DrDavid

Craig Ridley wrote:

Here is the code I used to get it all working. Hope it helps.

javascript:

/* 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;
}

HTML (I have this in my gallery description at the moment - remove spaces where required):

< div class="paypalButton">
< form target="paypal" action="[URL="https://www.paypal.com/cgi-bin/webscr"]https://www.paypal.com/cgi-bin/webscr[/URL]" 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="[EMAIL="orders@craigridley.com"]orders@craigridley.com[/EMAIL]">
  < 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 name="photoselection">
  < option selected value="5.00">4" x 6"   - Lustre (AU$5.00)</OPTION>
  < option value="7.00">5" x 7"   - Lustre (AU$7.00)</OPTION>
  < option value="20.00">8" x 10"  - Lustre (AU$20.00)</OPTION>
  < option value="30.00">8" x 12"  - Lustre (AU$30.00)</OPTION>
  < option value="50.00">12" x 18" - Lustre (AU$50.00)</OPTION>
  < option value="60.00">16" x 24" - Lustre (AU$60.00)</OPTION>
  < option value="70.00">20" x 30" - Lustre (AU$70.00)</OPTION>
< /select>
  < input type="image" src="/photos/259750608_aULWy-O.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
  < img alt="" border="0" src="[URL="https://www.paypal.com/en_AU/i/scr/pixel.gif"]https://www.paypal.com/en_AU/i/scr/pixel.gif[/URL]" width="1" height="1">
< /form>
< form target="paypal" action="[URL="https://www.paypal.com/cgi-bin/webscr"]https://www.paypal.com/cgi-bin/webscr[/URL]" method="post">
  < input type="image" src="/photos/259750602_CHSNN-O.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
  < input type="hidden" name="cmd" value="_cart">
  < input type="hidden" name="business" value="[EMAIL="orders@craigridley.com"]orders@craigridley.com[/EMAIL]">
  < input type="hidden" name="display" value="1">
< /form>
< /div>
<FORM action="<a href=" target=paypal p [ code]< href="http://www.paypal.com" cgi-bin webscr?></FORM>

<A href="mailto:you@home.com">

I like this code more than the code I got from my source. It's very nice and clean <img src="https://us.v-cdn.net/6029383/emoji/clap.gif&quot; border="0" alt="" >

Thanks so much for posting it!

tdinardo

The options being discussed in this thread look pretty close to what I'm looking to accomplish. The only thing missing is the ability to "continue shopping" after adding a package to the google/paypal cart and the ability to specify multiple photos as part of a package (e.g. chose "x" as one 5x7, "y" as one 5x7, and "z" as one 5x7 and one 8x10).

Has anyone figured out how to accomplish this yet?

Also, to avoid the confusion issues with having both the smugmug cart and the google/paypal cart live at the same time on a gallery, is it possible to remove the smugmug cart from a gallery when implement the google/paypal option for packages?<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>

Craig Ridley

tdinardo wrote:

The options being discussed in this thread look pretty close to what I'm looking to accomplish. The only thing missing is the ability to "continue shopping" after adding a package to the google/paypal cart and the ability to specify multiple photos as part of a package (e.g. chose "x" as one 5x7, "y" as one 5x7, and "z" as one 5x7 and one 8x10).

Has anyone figured out how to accomplish this yet?

Also, to avoid the confusion issues with having both the smugmug cart and the google/paypal cart live at the same time on a gallery, is it possible to remove the smugmug cart from a gallery when implement the google/paypal option for packages?<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>

Have a look at the example I linked to a couple of posts earlier. You will notice that when adding something to the cart, paypal will open in a separate window. Within the paypal cart if you click the continue shopping button, it will bring the smugmug window to focus and you keep shopping - this is the main feature I was trying to get to work. As for packages of multiple photos I have not tried this.

Also, while my sample gallery has both smugmug cart and paypal cart turned on while I am still testing, it is easy to turn off the smugmug cart. All you need to do is go into your gallery customisation and turn off the option for people to buy prints.

tdinardo

Very cool. I had only tried the google checkout sample. I like your implementation on paypal. very nice.

Hopefully I can figure out the package pricing for multiple shots in a package. That's really a hot need for the way I sell. Most of my customers have no interest in a package of the same shot. I'll keep digging; there's got to be a way to do it.

jerryr

Hi - I set some of the variables up in the paypal shopping cart to capture the album title and photo file name.

This might be helpful:
list of paypal variables:
https://www.paypal.com/IntegrationCenter/ic_std-variable-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.

An example of the use of variables for the paypal cart can be seen in a site I recently customized:

http://www.jakigoodphotography.com


- jerryr

Craig Ridley

At this stage I have decided to stick with the smugmug shopping cart system and have a note on my site for anybody that requires specialist printing needs to contact me.

You have a copy of my working code above, but the link to a working paypal system is no longer available.

If anybody is stuck however, dont hesitate to call out and I will see if I can offer assistance.

Cheers.

Crystal Clear Photography

Craig Ridley wrote:

Have a look at the example I linked to a couple of posts earlier. You will notice that when adding something to the cart, paypal will open in a separate window. Within the paypal cart if you click the continue shopping button, it will bring the smugmug window to focus and you keep shopping - this is the main feature I was trying to get to work. As for packages of multiple photos I have not tried this.

Also, while my sample gallery has both smugmug cart and paypal cart turned on while I am still testing, it is easy to turn off the smugmug cart. All you need to do is go into your gallery customisation and turn off the option for people to buy prints.

I just opened a google checkout account and a mercantic account for a shopping cart. I see that you have code to make a paypal cart open in another window and than continue shopping before checkout...is this possible to do with google checkout as well???

thanks for the help...