Grow your CSS skills. Land your dream job.

#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:

Comments

  1. thanks for helpful tutorial..

  2. Brian
    Permalink to comment#

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

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

  4. 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. Snookerman
    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. 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!

  7. Permalink to comment#

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

  8. 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!
    Jon

  9. Roman
    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. Always informative and helpful chris!

  11. 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. 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.

    • 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. glenn
    Permalink to comment#

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

  14. Permalink to comment#

    Very nice screencast, very helpful and informative.

    What is that Internet Explorer icon in your dock?

  15. Permalink to comment#

    Never mind found the IE link in the footer.

  16. 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. Joe
    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!

    Joe

  18. Permalink to comment#

    Chris-
    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. 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. Anonymous
    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.

    ORIGINAL
    < 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:
    http://cssdeck.com/labs/large-pressable-css-button

  21. chuck
    Permalink to comment#

    Thank You. this was very help!

  22. ErniE

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

    http://codecanyon.net/item/paypal-payment-form-with-admin-panel/2893385?ref=borni

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".