Custom PayPal button with Font Awesome

I was checking my visitor stats the other day and noticed that at least one visitor got to my Simple Sharing Buttons Generator site while searching for a way to create a PayPal button using Font Awesome. The person may not read this article, but hopefully someone else will find this little walkthrough useful.

Let me start with a few notes:

According to PayPal’s guidelines, you are not supposed to use the Donate button for anything other than fundraising:

This button is intended for fundraising. If you are not raising money for a cause, please choose another option. Nonprofits must verify their status to withdraw donations they receive. Users that are not verified nonprofits must demonstrate how their donations will be used, once they raise more than \$10,000.

I’ve seen people going against this and using a Donate button on their websites, but personally I decided to be safe by using the Buy Now button.

And one more thing: Unless you are already loading the Font Awesome icon font (or any other icon font that has a PayPal icon) on your website, you really should think about your site’s performance and not load all the 479 icons just so you can use one of them for PayPal.

There are sites like icomoon.com that let you create your own web fonts so that you can only load icons you need. For the purpose of this tutorial, I’m just going to load the full Font Awesome set.

Log into your account and click “Profile” as shown in the screenshot below.

Then click “My selling tools” and “Update” next to “PayPal buttons”.

As you can see, I have a few example buttons provided by PayPal here and my Simple Sharing Buttons Generator ~~Donate~~ Support Me With Cash button.

Now click “Create new button” under “Related Items” in the sidebar on the right. Choose “Buy Now” as the button type.

Fill in the Item name (for example “Support my project“) and if you want, you can also click “Need multiple prices?” to see how to add a dropdown with multiple price options – this is what I will be doing in my tutorial.

Select the “Add drop-down menu with price/option” option and fill out the details with something like this:

You don’t have to customize the look of the button as we will be just reusing the core functionality of the button and adding our own visual style. Any of the other options are up to you, but this should be enough.

Confirm your settings by clicking “Done“. This will update the “Your customer’s view” sidebar, so you can make sure everything looks alright.

Finally, you can click “Create Button” to get the code. Select the generated code and copy it.

Create a new file, call it buttons.html, and paste the code you just copied. You can then open the HTML file in your browser. You’ll see that the dropdown and the button work as you’d expect.

You don’t really need to do a lot of changes to the code: mainly you just need to remove the table (here’s why) and the button image, then you’re free to style your dropdown and confirmation button any way you want.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="#############">
  <input type="hidden" name="on0" value="Support">Send me
  <select name="os0">
    <option value="a dollar">a dollar \$1,00 USD</option>
    <option value="ten bucks">ten bucks \$10,00 USD</option>
    <option value="one hundred dollars!">one hundred dollars! \$100,00 USD</option>
  </select>
  <input type="hidden" name="currency_code" value="USD">
  <button name="submit"> Pay via PayPal</button>
  <img alt="" border="0" src="https://www.paypalobjects.com/en\_US/i/scr/pixel.gif" width="1" height="1">
</form>

Now, add this line to the top of the file so that Font Awesome is loaded on the page.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

Then you can change this line:

<button name="submit"> Pay via PayPal</button>

to this:

<button name="submit" title="Pay via PayPal - The safer, easier way to pay online!"> Pay via <i class="fa fa-paypal"></i></button>

You should end up with something like this (note that I added an ID to the form element so you can style it with CSS):

<form id="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="#############">
  <input type="hidden" name="on0" value="Support">Send me
  <select name="os0">
    <option value="a dollar">a dollar \$1,00 USD</option>
    <option value="ten bucks">ten bucks \$10,00 USD</option>
    <option value="one hundred dollars!">one hundred dollars! \$100,00 USD</option>
  </select>
  <input type="hidden" name="currency_code" value="USD">
  <button name="submit" title="Pay via PayPal - The safer, easier way to pay online!"> Pay via <i class="fa fa-paypal"></i></button>
  <img alt="" border="0" src="https://www.paypalobjects.com/en\_US/i/scr/pixel.gif" width="1" height="1">
</form>