How to create a PayPal button for donations

I work with many non-profit and political clients and besides providing thorough information about their cause or position of the issues on their website is to have a way for supporters to make donations. PayPal isn’t just for small organizations and businesses anymore. Its a widely accepted way for payments and donations. This tutorial will provide a step-by-step process for creating a donation button to place on your website.

First, log into your PayPal account or sign-up for a new account.

PayPal Dashboard

Click on the Profile tab under My Account.

Profile Summary

Under Selling Preferences, click the My Saved Buttons link.

My Saved Buttons

Click the Create new button link.

Create new button

From the Choose a button type, select Donations.

For Organization name/service, enter the name of your organization.

For the Donation ID (optional), enter a unique number if you’d like to track this type of donation.

Customize button appearance

Click the blue triangle next to Customize button.

Customize PayPal button

To customize the PayPal button, you can check Use smaller button, and/or  Display credit card logos. You can change the Country and language selection from the drop-down menu. You will see a previous of your button in the Your customer’s view pane.

Customize your own button

To use your own button, select Use your own button image. Enter the URL of where your image is located on the web. Currently PayPal does not allow you to upload images.

Select a currency type

Select your currency type.

Contribution Amount

In the Contribution amount, select to either allow Donors to enter their own contribution amount, or Donors contribute a fixed amount, and then you’ll enter the amounts. The later will work if you are creating a special donation button for a specific event where tickets are a specific donation amount.

Merchant account ID

Under Merchant account IDs, select either to Use my secure merchant account ID, or Use my primary email address [your email address]. If you want to keep your email address confidential, select the first one.

Steps 2 and 3 are not required, however let’s review them. Click on Step 2.

Save your buttons

By default PayPal saves your button for later use, you can deselect this if you desire.

Click on Step 3 to view Advanced Features.

Advanced Features

You can custom different features such as return pages, additional variables to be passed through the button, and so much more. This section is for more advanced users, so for this tutorial we will just keep everything as default.

Click the Create Button button at the bottom of the screen. This opens up the button code page.

Website codeUnder the Website tab HTML code is provided to be placed directly on your website. Copy the code using the instructions provided to copy and paste the code text on your site. Because the code provided by PayPal includes a <form> tag, this code may not work for .NET pages or in other types of platforms. If you are using a WordPress widget this may not be ideal either. In these instances the Email code will serve you better.

Email code

The Email code can also be inserted in emails to create a button to send in your correspondences.

I hope this tutorial for creating PayPal donation buttons will make the process a bit easier if you a newbie to PayPal, or perhaps refer your clients to this tutorial if you are a webmaster.

Sign up for PayPal and start accepting credit card payments instantly.

Decorating Your Website or Blog for the Holidays!

After you’ve festively decorated your home and place of business, don’t forget about showing that same holiday spirit with your electronic media.

Start off by downloading a very festive holiday wallpaper to your computer desktop(s). I tend to lean toward the more contemporary wallpapers so here are a few of my favorite resources:

Next, decorate your website or blog to show your spirit and wish your visitors a Happy Holiday. I used to work for a government agency that every Christmas, I would have a snow scene that would replace the header section. On their timekeeping application where I had branded a little man running with a giant clock in his hand, I replace it with a similar image but the little man had a santa hat on. If your website uses a photograph of your city or some other landscape, replace it with a winter scene with the same focal point — unless you live in California or somewhere else where Winter looks like Summer.

Here are a few resources to give your website that extra seasonal flair:

If your website or blog uses the WordPress or Joomla platform, try out one of these Xmas templates to replace your current design during the holiday season:

Wait, what about your social networking site, you definitely have to decorate it as well using these resources:

Perhaps you’d like to make your own holiday design. Here are some tutorials and tools for assisting you in doing so:

Don’t forget about your mobile device. Show your holiday spirit with these mobile wallpaper and themes:

Last, when you’re sending out those Christmas cards through the US Postal Service, don’t forget about sending special holiday wishes via e-mail using some of these resources:

Please SHARE with me your websites and blogs that you’ve decorated for the holiday season, or other holiday resources for web or blog designs. Perhaps you can be an inspiration to others.

Creating a barcode image in your ASP.NET page

There are many products out there that can dynamically generate various types of barcodes to be used in your web application, but if you just need something simple that uses the basic Code 3 of 9 symbology this is a simplified way. It utilizes two different .aspx pages. One will create the barcode image, and the other will provide the characters to be translated and embed the barcode page.

The image for the Code 3 of 9 symbology is actually a font. The font has to be installed on the server or computer for the website that will create the barcode, but the browsing user themselves will not have to have the font installed since we will render the barcode as an image in our page.

First, download the free Code 3 of 9 symbology font at from ID Automation. http://www.idautomation.com/fonts/free/

Next, we will create a new .aspx page that will render the barcode image. Let’s call it barcode.aspx. Copy this code in the code-behind:

Imports System
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls

Partial Class BarCode
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Get the Requested code to be created.
        Dim Code As String = Request("code").ToString()

        ' Multiply the lenght of the code by 40 (just to have enough width)
        Dim w As Integer = Code.Length * 40

        ' Create a bitmap object of the width that we calculated and height of 100
        Dim oBitmap As New Bitmap(w, 100)

        ' then create a Graphic object for the bitmap we just created.
        Dim oGraphics As Graphics = Graphics.FromImage(oBitmap)

        ' Now create a Font object for the Barcode Font
        ' (in this case the IDAutomationHC39M) of 18 point size
        Dim oFont As New Font("IDAutomationHC39M", 18)

        ' Let's create the Point and Brushes for the barcode
        Dim oPoint As New PointF(2.0F, 2.0F)
        Dim oBrushWrite As New SolidBrush(Color.Black)
        Dim oBrush As New SolidBrush(Color.White)

        ' Now lets create the actual barcode image
        ' with a rectangle filled with white color
        oGraphics.FillRectangle(oBrush, 0, 0, w, 100)

        ' We have to put prefix and sufix of an asterisk (*),
        ' in order to be a valid barcode
        oGraphics.DrawString("*" & Code & "*", oFont, oBrushWrite, oPoint)

        ' Then we send the Graphics with the actual barcode
        Response.ContentType = "image/jpeg"
        oBitmap.Save(Response.OutputStream, ImageFormat.Jpeg)
    End Sub
End Class

We place our code inside the Page_Load routine because when the barcode.aspx page gets displayed it should dynamically create the barcode image. The first line take the string that is sent in the form of a request to this page and stores it a the variable ‘Code’. We are going to send this request from our container .aspx page.

Create a second .aspx page that will be used as your container page, call it container.aspx. Add an image control and call it ‘myBarCode’. This will hold the rendered barcode image.

<asp:Image id="myBarCode" runat="server" />

 Now in the code-behind for your container.aspx page, add the following:

Dim barCodeStr as String = "1234ABCD"
myBarCode.ImageUrl = "BarCode.aspx?code=" + barCodeStr

In this code, ‘barCodeStr’ is the string variable that will hold whatever set of characters you wish to be rendered as a barcode. The string is then sent as a querystring request to the BarCode.aspx page which creates the barcode image. Then the product of that .jpg image is provided as the ImageUrl to the image control placed on your container page.

Now in our example, we prepopulated the character string that we wanted rendered as a barcode, however, you can give value to this string variable in whatever way you need to in order for your application to work, even through a random character string.