#53: Customizing PayPal Forms, Buttons, and Headers

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.

Links from Video:


  1. User Avatar
    joyoge designers' bookmark
    Permalink to comment#

    thanks for helpful tutorial..

  2. User Avatar
    Permalink to comment#

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

  3. User Avatar
    Ninja Clone
    Permalink to comment#

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

  4. User Avatar
    Nathanael Padgett
    Permalink to comment#

    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

  5. User Avatar
    Permalink to comment#

    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.

  6. User Avatar
    Jason Boyle
    Permalink to comment#

    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!


  7. User Avatar
    kyle steed
    Permalink to comment#

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

  8. User Avatar
    Jon Hatch
    Permalink to comment#

    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!

  9. User Avatar
    Permalink to comment#

    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.

  10. User Avatar
    Michael Arnaldo
    Permalink to comment#

    Always informative and helpful chris!

  11. User Avatar
    Gavin Steele
    Permalink to comment#

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

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

  12. User Avatar
    Brian Sexton
    Permalink to comment#

    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.

    • User Avatar
      Brian Sexton
      Permalink to comment#

      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.

  13. User Avatar
    Permalink to comment#

    Thanks a lot for this. Not too long, you keep it interesting!

  14. User Avatar
    Permalink to comment#

    Very nice screencast, very helpful and informative.

    What is that Internet Explorer icon in your dock?

  15. User Avatar
    Permalink to comment#

    Never mind found the IE link in the footer.

  16. User Avatar
    Aaron Bazinet
    Permalink to comment#

    Nice video Chris. PayPal’s support pages aren’t exactly the clearest, so having someone with prior experience demonstrate some common uses is great.

  17. User Avatar
    Permalink to comment#

    Nice One Chris!

    Been looking high and low… this vid saved my ass!

    Hoping you can help with one more thing…

    I’m trying to create a text link to use throughout my webpage…

    I would have just used the email link Paypal provides but then my payment page wouldn’t have my header on it.

    SOS ~ HELP!!!

    Big Masive Thanks in advance!


  18. User Avatar
    Permalink to comment#

    The button you made with the “random amount entry” I cannot seem to make work. That button would work perfectly for my clients to pay Deposit and Balance. Is it me……….?

  19. User Avatar

    Thanks! great stuff!
    quick question tough, I’m making a form for a competition with an entry fee, so I would need a file upload field somehow with a linked reference to the payment. Is this also possible?

  20. User Avatar
    Permalink to comment#

    Thx for the tutorial. I am trying to add the “Pay Now” button from PayPal to an existing button style. I read the tutorial but the problem is that my button is also wrapped in a span for the hover functionality and styling to work.

    < a href=”#” class=”button-grn”>Buy Now< /a>

    < input type=”submit” name=”submit” class=”button-grn” value=”Buy Now”>

    I am able to add the class of “button-grn” but I don’t know how to incorporate the “span”. Below is a link to the button CSS3 code:

  21. User Avatar
    Permalink to comment#

    Thank You. this was very help!

  22. User Avatar

    Great tutorial as always Chris.
    If anyone wants a quick solution with more features

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.