#53: Customizing PayPal Forms, Buttons, and Headers

Posted on: 2/11/2009 By: Chris Coyier 19 Comments

PayPal, love it or hate it, is easiest way to send and receive money online. In this screencast we go through how to create a Buy Now button, which uses a custom email address, has a custom header, custom thank you page, and is custom styled. Of course we touch on a few other tips and tricks along the way.

At the end, I (randomly) quickly introduce a cool free download that contains a fully working Ruby on Rails application that interfaces with an included iPhone application.

Running time: 28:35 minutes

Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Links from Video:

Get the Flash Player to see this player.

Responses

joyoge designers' bookmark says:

02/12/2009 at 8:20 am

thanks for helpful tutorial..

Brian says:

02/12/2009 at 8:54 am

Great tutorial! You seem to cover the important things in life! :)

Ninja Clone says:

02/12/2009 at 9:02 am

Pop filter? You can make one yourself using your granny old stockings :)
Thanks, nice tutorial.

Nathanael Padgett says:

02/12/2009 at 9:29 am

Glad to hear about the web3jobs.com website. I’d suggest they get a mailing list going so I can be notified when it launches. Maybe you can let us know when it launches via your screencasts. Sent you an email – hope there were some left. Thanks Chris

Snookerman says:

02/12/2009 at 10:07 am

Chris, self closing tags are not required, unless you are using xhtml. I’m guessing PayPal doesn’t want you to use xhtml because Internet Explorer doesn’t support it. What you are using is a pseudo-xhtml that is actually being parsed as html. You can see that in your code: content=”text/html;

If you want more info about this, check out this article:
Beware of XHTML (http://www.webdevout.net/articles/beware-of-xhtml)

It’s long but definitely worth the time.

Jason Boyle says:

02/12/2009 at 12:48 pm

This seems to happen a lot. I’m faced with a problem, scouring the internet for a solution. Recently I’ve been charged with the task of implementing PayPal into a site and I’ve never done it before. I think to myself, hey CSS-tricks would probably have something on that issue…low and behold it’s yesterday’s freakin’ topic!

Zeitgeist!

kyle steed says:

02/12/2009 at 3:08 pm

I love “The Super Hat Store” site. So sexy!

Jon Hatch says:

02/13/2009 at 8:49 am

Wow. Great screencast Chris! Yesterday I was approached with a project that needs PayPal integrated. Like Jason above, I have never done this. I check your site today…and bingo! Like you were reading my mind.

Thanks for all your hard work!
Jon

Roman says:

02/13/2009 at 12:12 pm

PayPal is convenient, however read the fine print carefully. PayPal’s “Seller Protection Policy” is anything but. If you sell good and accept payment through PayPal, you’re operating on good faith that your buyer won’t scam you.

I had a buyer who reported the item they received as “different than advertised” receiving a refund from their credit card company. The credit card company then went to PayPal for the refund and PayPal came after me. Because they reported the item “different than advertised” refunding this money to PayPal became my responsibility not covered in their “Seller Protection Plan”, even though I never received the item back. I was out a 500 dollar product AND an additional 500 dollars to pay PayPal. The dispute was later settled by PayPal and the purchaser’s credit card company, but only after months of being hounded by their collection agency (whos automated dialer prank called me repeatedly outside of legal hours to be contacted by a collection company).

Point being, I’ve made dozens of transactions through PayPal that went smoothly, however none of them were worth the damage this incident did to my credit, nor the headache PayPal gave me with their collection agency.

Michael Arnaldo says:

02/13/2009 at 1:31 pm

Always informative and helpful chris!

Gavin Steele says:

02/13/2009 at 2:16 pm

Chris, Thanks for this. Nice simple walk through :)

how do you separate your icons on the dock like that?

Brian Sexton says:

02/13/2009 at 3:20 pm

I just watched your PayPal video and it seems like a great overview and very timely for me since I need to integrate PayPal payments into a current project. However, I am left wondering how your Web site knows about the transaction.

The client site upon which I am working needs to accept payments for only one thing to begin with—a pre-determined flat fee—so that should be easy to set up, but then what? Does someone need to manually update my client’s database to show that payment has been received after receiving the payment or is there some way to have PayPal confirm that a payment has been made, perhaps by echoing the user’s e-mail address or one of the advanced variables from the button (e.g., a user id or an invoice id) back to the thank-you page? Did I just miss that part of the video?

Any information anyone can provide would be much appreciated.

Brian Sexton says:
02/13/2009 at 9:17 pm
PayPal’s Instant Payment Notification (IPN) system can submit information back to the merchant server, but it looks like their Payment Data Transfer (PDT) system is the way to go for getting information onto a custom, locally hosted payment confirmation page. However, if anyone has any tips for using either system to customize an away-then-back checkout experience, I would still very much like to read them as I am new to PayPal-related development.