# Calculating credit card processing fees with Javascript when charging fees back to a client through a form

#### March 12th, 2013

Once in a while I like to write a geeky post with something new that I’ve learned. I’ve always charged my credit card processing fees to the client if they choose to use a credit card. For Google Checkout, and other processors like stripe.com that actually helped me out with this, they charge a flat 2.9% plus \$.30 per transaction in fees. This might seem like a simple calculation, but to charge this to a client it gets more complicated. You could just multiply the amount by .029 and add \$.30 to find the fees which would be easy. But then you have to add that fee back into the amount, then when you process the transaction the original amount plus the fee have to go through the payment processor, so there is a fee on the fee.  While this extra is minimal, it causes a problem with Quickbooks because it’s nice to take in the exact amount of the invoice.  I knew there had to be a way to calculate this exactly, even though I was always good at math I’ve forgotten everything I learned in school.  The support at Stripe.com gave me a formula that will take into account the small extra fee added when charging the fee back to the client.  So here is the Javascript that can be added to a html form to calculate this.

The first part would go in your form where the user inputs the amount, or however you want to do this. I just let the client enter in the amount on their invoice I give them separately. You can see this complete form on the ‘all’ menu of my website if you want to view the full source.

```\$<input type="text" name="amount" value="0.00" onblur="Calculate()" />
```

This is the formula to calculate the amount to charge the client for the fees and the fee on the fees. I hope this make sense.

```function Calculate()
{
var price = document.form.amount.value;
price = price * 100
var fee = Math.round(((price + 30) / .971)) - price;
price = price + fee;
var total = price / 100;
document.form.amount.value=total;
}
```

# Creating Apple.com style HTML5 box gradients

#### January 24th, 2012

The title of this post probably just turned off most readers, but if you make your own website you should read on.  Anyone who has followed me for long knows I’m into website design, not the out of date Flash sites, but using modern techniques like HTML5 and CSS3.  You will miss a lot of subtle effects on my website if you are not using a modern browser, of course everything will still work.

I figured if there is a company that knows subtle style it would be Apple, of course after their leather bound iPad calendar app this could be argued.  Their website uses very little color, just some very slight shades of grey, except for their products that really pop off the page.  You might notice my website tries to do the exact same thing with my photography.

I was studying Apple’s website, and like the way boxes that contain information look, for example on their store page.

It might be hard to see in this picture. But the box has a very slight gradient that gets much stronger near the bottom of the box.  There is also a very slight drop shadow on the bottom that makes the box looked slightly raised off the page.  I don’t know how Apple does it, but I thought I could do this with CSS3.  This means the effect can be done without using any images or gradients made in Photoshop.

While you could try to figure out the code for this manually.  The gradient generator from Colorzilla.com http://www.colorzilla.com/gradient-editor/ is fantastic.  It can create gradients similar to Photoshop that have color stops that work in most web browsers, even older IE versions. What the color stop lets you do, is instead of having a gradient that changes shade evenly from top to bottom, you can do, like Apple does, and have it change very little until the bottom portion of the box where it increases.  Here is the exact code I use to get a very similar gradient as well as drop shadow on my boxes like on the Apple Store website, even a slight roundness to the corners. To put a box like this anywhere on your page just use something like . . .

`<div class="myBoxes">Whatever I want inside</div>`

Then in your css file . . .

```.myBoxes {
background: rgb(255,255,255);
/* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 75%, rgba(247,247,247,1) 100%); /* FF3.6+ */;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(75%,rgba(253,253,253,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */;
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */;
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* IE10+ */;
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%); /* W3C */;
-webkit-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
border: 1px #CDCDCD solid;
}
```

This may look complicated, but play around with the gradient generator and you can make your own easily.  Or if you want to try my code, just paste this into your CSS for any <div>. There is a small hack you have to do to get it working properly in IE9, but it explains how to do it on Colorzilla’s site.  I hope any web developers find this helpful, if you do or if you need more explanation let me know in the comments below.

# Backup strategies for a professional photographer ver. 2

#### October 9th, 2011

A while back a wrote a post about my backup strategy, but I’ve changed my workflow significantly since then so I thought I needed to make an updated post.  This should be helpful to anyone trying to figure out how to keep the precious images, we as professional photographers take, safe from accidental loss or deletion.  Backup is one of the most important things a photographer needs to do.

First of all, I forget who said it, but if you don’t have a digital image in at least 3 places you don’t really have it.  You should have 3 copies of any picture you take, you also should have an offsite copy just incase your home or office is broken into or fire or something else destroys your hard drives.  This might seem like overkill, but trust me, things happen.  I once had to get some data from what I call my last resort offsite backup because of a stupid mistake on my computer.  It’s scary, I’m really glad I was making good backups.

#### My Workflow:

Update 9/30/2012 : Brand name CF cards such as from Sandisk or Lexar are extremely reliable.  In fact, in my literally hundreds of thousands of pictures, I’ve maybe had one or two that was corrupted.  Even so, my main camera body has two CF card slots.  Every time I take a picture it is automatically backed up as a jpeg to the second card.  This is probably unnecessary. But it makes me feel better.

First of all, as soon as I get home from a shoot, I begin importing images into my Lightroom catalog and to the folder it creates on my hard drive.  I don’t have time in this post to go into my Lightroom workflow, but the images get placed into an organized by date folder on my drive.  Then I put the CF memory card to the side and I don’t delete it until all my backups have been made, typically by the next morning.

#### First Backup:

The important key to backing up is that it has to be automatic.  You will forget if you have to do it manually.  I use software called Sync Toy on my PC.   You can see how to automate the software here.  Automatically each night, Sync Toy copies any new or changed images from my working hard drives inside my PC over to my Drobo.  This way I have my original working copy on my fast internal raid 0 array, plus an extra copy on my Drobo.  The Drobo is much slower but provides the additional protection that a drive can fail and be replaced without any loss of data.  I can’t go into what a Drobo is here, but you can check out their website.

#### Offsite Backup:

So now we have 2, and essentially 3 copies of the pictures because the Drobo provides protection from a hard drive failure itself.  What about the offsite backup? In the past I would just occasionally put a copy of all my images on an external hard drive and store it somewhere offsite, but this is a pain and it doesn’t get updated frequently enough.

#### Why Carbonite doesn’t work:

I’ve tried various services like Carbonite that promise unlimited offsite backup.  This doesn’t work for a pro photographer!  Here is why.  I have a new Docsis 3.0 internet connection with 5mbps up, so technically I have plenty of bandwidth to upload as many files as I need quickly.  The problem is, at first Carbonite works very fast.  However, after around 50gb of storage, they start to slow down your uploads so much that it becomes very difficult to keep up with incoming images even if backing up constantly day and night.  After 200gb they slow you down to 100kbps, so you are pretty much done at that point.  So even though they claim unlimited backup, they slow you down so much that it’s not practical.  I always wondered how they got unlimited storage for \$60 a year, now I know.

#### Amazon S3 to the rescue:

Update 9/30/2012 : Now instead of backing up just my latest images offsite, thanks to the cheaper Amazon Glacier storage I now backup all images offsite.  I don’t really have to worry about the fireproof safe and things like that anymore.  I know in a worse case scenario I can pull the images (at a cost) back down from Glacier.  This cost is about \$10 per TB of data, really cheap.  They just charge if you need to pull the data back down.  Everything else below works the same for Glacier as S3.

I signed up for the Amazon S3 service.  This gives you storage space on Amazon’s servers that you can use as much and as fast as you want, they just charge you per GB of storage.  If you use their reduced redundancy storage option, which is still 99.9% reliable, plenty for a 3rd offsite backup, it cost about \$10 per 100GB per month.  This might seem like something very complicated, but if you get software called Cloudberry Backup for about \$30 it steps you through the process and automates the backups.  With the Cloudberry software, every night any new pictures I’ve imported, are automatically uploaded and backed up to the Amazon S3 service.  S3 is so fast that I can backup a whole wedding’s worth of raw images overnight.  What I’m going to do so the cost doesn’t get too high, I’m still going to keep my offsite physical hard drive backup and update it every few months.  My latest 500GB or so of pictures I’ll keep backed up on Amazon S3 which will cost around \$50 per month.

Now if you really want to get fanatical, like I am, you can also get a fireproof safe and keep a 4th backup copy in there as well.  Hard drives are so cheap now it doesn’t hurt.  So to sum it up, Microsoft Sync Toy automatically copies any new pictures to my Drobo.  The Cloudberry Backup automatically uploads all new images to Amazon S3 overnight.  You would really have to try hard to find a way to lose images using this system.  I hope this helps!   Let me know if it does or if you have any suggestions below.

# My website is fully going with HTML5

#### March 13th, 2011

Unless you are interested in website development, you might want to skip reading this post for my other photography related posts instead.

This time of the year I have more time for playing around with my website and making changes to it. I think one big advantage I have over a lot of photographers is I know how to work on my own website, I don’t have to hire someone every time I want to make a change.  I think a lot of photographers don’t even realize the importance of a website.  I notice my website has a higher Google pagerank (what Google uses to rank websites) than a big studio like Gene Ho photography.

One big problem with creating a website is designing for Microsoft’s Internet Explorer. Every other web browser, including anything you would be using on a Mac, support what is called HTML5.  You have probably heard of this, it’s a buzzword now because it’s supported by many devices like the iPad, it enables much nicer looking websites that can do a lot of things previously not possible.  Finally on March 14th, Microsoft is releasing Internet Explorer 9, which like every other browser, supports modern web standards. With this in mind, I decided to make some website changes I’ve been wanting to make for a while that require a visitor to have a modern web browser.

I’m not a real web developer, I just know some html and css, I mostly just know how to layout a website and make it look nice.  So I’m using just some very limited features of HTML5 to make my website look better.  If you visit my website on a previous version of Internet Explorer such as 7 or 8, with my latest changes, you will now see this…