Cutting Edge Tutorials http://www.cuttingedgetutorials.com Tutorials from the Front line of Web Development Mon, 06 Jul 2009 19:01:58 +0000 http://wordpress.org/?v=2.3.3 en Creating a PayPal Payment Form http://feedproxy.google.com/~r/CuttingEdgeTutorials/~3/4uz2uX-JN5o/ http://www.cuttingedgetutorials.com/2008/04/22/creating-a-paypal-payment-form/#comments Tue, 22 Apr 2008 09:37:55 +0000 admin http://nettuts.com/?p=6 ]]> some issues, PayPal does provide a very simple way to take payments on a website. And with a little tweaking you can easily turn a PayPal “Buy Now” button into a form where the user specifies how much they’d like to pay and what they are paying for.

How it Works

PayPal makes doing this very easy by providing those “Buy Now” buttons you’ve probably seen around the place. Basically when you see one of those buttons, it is really the submit button on an HTML form with all the form fields set to hidden. This is fine for when you have a set price and set item, but what if you want the user to specify how much they are paying, and what they are paying for. For example if you are adding a payment form to your freelancing site then you would want the client to type in their invoice number and the amount they wish to pay. This is easily done by changing the <input> fields from hidden to text and stripping away the defaults so that the user can fill them in. So let’s get started.

Step 1

The first thing we need is a page to return to after the transaction. In my example I’m creating a donation form for NETTUTS, so I created this Payment Confirmation page.

Step 2

Next we log into our PayPal account and click the Merchant Services tab. Down the bottom right you’ll see a link that says Buy Now Buttons, follow that through and you get to a form to create one of these buttons. Complete the form, under item ID just type the number 1, and use similar dummy numbers for the Item Name and Price. We’ll change those in the code later. Make sure you do NOT encrypt the button. The rest of the fields (weight etc) can be left blank.

Step 3

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="accounts@freelanceswitch.com">
    <input type="hidden" name="item_name" value="Donation">
    <input type="hidden" name="item_number" value="1">
    <input type="hidden" name="amount" value="9.00">
    <input type="hidden" name="no_shipping" value="0">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="lc" value="AU">
    <input type="hidden" name="bn" value="PP-BuyNowBF">
    <input type="image" src="https://www.paypal.com/en_AU/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
    <img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
Here’s the code that PayPal gives me. As you can see the button is in fact a <form&rt; element that uses an image submit button. Most importantly we can change any of those hidden. input fields to actual text fields simply by changing the word hidden to text. This would mean that for example instead of specifying the amount value to be 9.00, we can allow the user to type in the value they wish to pay. Similarly the item_name can also be a user input. Here’s a run down of the fields you’ll be interested in changing:
  • Item Number The value you place in this field appears when the user goes to PayPal and clicks the down arrow for more details on their purchase (you can see it by entering some information in the test form below).
  • Business This field is for the PayPal account being paid to. Make sure it’s set to your account. The one I’m using is for accounts [@] freelanceswitch.com (which is linked to our sister site FreelanceSwitch).
  • Currency Code This is pretty straightforward. When creating the Buy Now button you can select different options for this setting. If for some reason you wanted to, you could also change this to a <select> element and let your user choose what currency to pay in.
  • Item Name The item_name field is the one where your user describes what they are paying for. In the example form below I’ve used a select box to let the user choose what they are donating towards. You could just as easily change it to a text field and let the user type something in.
  • Amount The only thing to note here, is that if the user types anything other than a number in here PayPal will return an error, so you might want to use some Javascript to do validation on this field and ensure it’s a number - though that would be a whole other tutorial. So instead for my example form I’ve just written a $ sign before the text field, hoping that will make it a little more self explanatory.

Step 4

You might have noticed that there is no space for a return URL. Happily in a previous version of the Buy Now button form, there used to be, and the value still works. You simply need to add this line to your form (substituting in the appropriate return URL of course!). 

<input type="hidden" name="return" value="http://nettuts.com/payment-complete/">

Step 5

Since that PayPal button is pretty ugly, I’m also going to switch back to a regular submit button. To do this we simply swap the <input type='image'> element with a regular <input type='submit'> element, like this: 

<input type="submit" value="Pay with PayPal!">

Step 6

Make a Donation to NETTUTS Fill out the form and send us a few dollars for your favourite tutorial:
Donation / Contribution? Which tutorial are you donating for? How much do you want to donate? $
So there you have it. In the somewhat silly example above I’ve used two <select> fields. You could of course use regular text fields or really any combination. You can even leave fields out, for example it’s not really necessary to have the item_number and item_name in my example. If you fill out the form and press Pay, you’ll see where the three inputs appear in PayPal - don’t worry you don’t need to actually pay! Here’s the final code I used: 

<p><big><b>Make a Donation to NETTUTS</b></big><br />
Fill out the form and send us a few dollars for your favourite tutorial:</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="business" value="accounts@freelanceswitch.com">
    <strong>Donation / Contribution? </strong><br />
    <select name="item_name">
      <option value="Donation">Donation</option>
      <option value="Contribution">Contribution</option>
    </select>

    <strong>Which tutorial are you donating for?</strong><br />
    <select name="item_number">
      <option value="PayPal Form Tutorial">The PayPal Form Tutorial</option>
      <option value="Amazon S3 Tutorial">The Amazon S3 Tutorial</option>
      <option value="Some Other Tutorial">Some Other Tutorial</option>
    </select>

    <strong>How much do you want to donate?</strong><br />
    $ <input type="text" name="amount">

    <input type="hidden" name="no_shipping" value="0">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="lc" value="AU">
    <input type="hidden" name="bn" value="PP-BuyNowBF">
	<input type="hidden" name="return" value="http://nettuts.com/payment-complete/">

	<br /><br />
    <input type="submit" value="Pay with PayPal!">

</form>
]]> http://www.cuttingedgetutorials.com/2008/04/22/creating-a-paypal-payment-form/feed/ http://www.cuttingedgetutorials.com/2008/04/22/creating-a-paypal-payment-form/ Create an Illustrated Look From a Photograph http://feedproxy.google.com/~r/CuttingEdgeTutorials/~3/GjxxrMYgMzQ/ http://www.cuttingedgetutorials.com/2008/03/11/create-an-illustrated-look-from-a-photograph/#comments Wed, 12 Mar 2008 04:12:54 +0000 admin http://psdtuts.com/photo-effects-tutorials/create-an-illustrated-look-from-a-photograph/ ]]> Before/After You can see a Before/After below (just roll over the image once it’s all loaded in). I bought my image from iStockPhoto - here’s the item (Note if you download the sample PSD file from PSDTUTS Plus, the image has a watermark over it, so you’ll need to purchase it and swap it in).

Step One:

Create a new Solid Color Adjustment layer and fill it with White. Above that layer, create a new blank layer by hitting the New Layer Button at the bottom of the layer palette. Name that layer "Basic Shapes". Now turn both of those layers off.

Step Two:

We are going to use the Pen Tool (P) to trace all of the basic structural elements of the image. In my case it will be the outline of the body and the outlines of the clothes. With the pen tool selected simply click anywhere you would like to start then continue to click and drag to trace the part you are working on with the path. To make it look more like a sketch we are going to use a lot of small paths rather than trace the whole thing with one long path. When you come to a place where you think the path should end, hold down the CMD (or CTRL) key and click anywhere off the path. That will deselect it and now you are free to create another one. Keep doing this until all of your basic shapes are traced. Here are a few shots of how I traced my image: A common misconception is that a path needs to be a loop. Not true. We are going to use all "open paths" in this tutorial.

Step Three:

Turn on your white layer and your blank layer. Select the blank layer. In the paths palette drag your work path down to the New Path button at the bottom of the palette to save it. Select the brush tool and open the brushes palette. Select any round, hard brush preset. Under the Brush Tip Shape section modify the brush to create a thin ellipse by bringing the roundness down to 12%. Make the angle 45 degrees. Turn on the Shape Dynamics section bring the Size Jitter to 100, the Minimum diameter to 35, and the Angle Jitter to 5. With the blank layer still selected hit D to make black your foreground color then right/control + click on the path and choose Stroke Path. Make sure that Simulate Pressure is checked and use Brush as your source. Hit OK. You might have to adjust the Master Diameter in the brushes palette if the lines are too thin or thick. Repeat steps 2 and 3 a few more times, each time getting more and more detailed in what you trace. The more detail you trace, the thinner you should set the Master Diameter on the brushes palette. Each time you do a pass make sure to apply the stroke onto a new layer.

Step Four:

Now that we have the outlines, lets paint in some color. Duplicate the the layer that contains your photograph. Put the copy at the top, above all the other layers. Set the Blending Mode to "Color". Hit B for the Brush Tool. In the brushes palette set the Brush Angle to -45 degrees and turn off the Shape Dynamics. Make the brush a bit larger. Make a new blank layer and call it "Paint". Make sure that its below all of your outline layers. Make sure that you foreground color is still set to black. In the properties bar set the opacity of the brush to 10%. Very roughly paint in the color where you want it. Be sure to release the mouse every now and then so that the color begins to multiply over itself. Dont worry about staying in the lines too much. I used a Wacom Tablet so it was easy for me to get nice strokes but if all you have is a mouse just do the best you can.

Step Five:

Hit E for the Eraser Tool. Set the eraser brush up the same way that we did the paint brush. Make sure that the eraser brush’s opacity is at 50%. Now go back and tidy up your paint job. I like it when you can still slightly see the paint going over the lines.

Step Six:

On my image, I want the pants to be blue instead of that peachy color so I am going to make a new Hue/Saturation Adjustment layer at the very top of the layers palette. Drag the Hue slider over until you get the hue that you like. Adjust the saturation as you like. Wait, the whole image changed! Thats OK we are going to fix that. Click on the layer mask thumbnail on the Hue/Sat layer and hit CMD+I to invert it. The image will go back to the way it was before. Set your background color to White and select the Eraser Tool. Set the eraser’s opacity to 100% and paint on the mask so that the hue adjustment we made appears. Now just paint where you want the color shift. Continue this way until you are appy with the colors. The shirt adjusted. The skin tone adjusted.

Step Seven:

Make one more new blank layer just below the "Paint" layer. Call it "bkg paint". Select the brush tool again and make the master diameter huge. Mine is at 200. With the brush opacity at 5% do a few really broad strokes across the whole image just to bring in a little color to the background. ]]> http://www.cuttingedgetutorials.com/2008/03/11/create-an-illustrated-look-from-a-photograph/feed/ http://www.cuttingedgetutorials.com/2008/03/11/create-an-illustrated-look-from-a-photograph/ Reader Request: MSNBC Style Effect http://feedproxy.google.com/~r/CuttingEdgeTutorials/~3/ZQAVp84zgXY/ http://www.cuttingedgetutorials.com/2008/02/20/reader-request-msnbc-style-effect/#comments Wed, 20 Feb 2008 05:51:01 +0000 admin http://psdtuts.com/tutorials-effects/reader-request-msnbc-style-effect/ Step 1 Create a new document. Double click on the background layer to open the Layer Styles. Select the Gradient Overlay and use black and a dark blue for the colors. Select Radial for the Gradient Style.

Step 2

Create a new layer and fill it with black.

Step 3

First select black for the foreground color and a medium grey for the background color. Go to Filters>Render>Fibers. Set 36 for the Variance and 1 for the Strength.

Step 4

Go to Filters>Blur>Motion Blur. I set the distance to 999, the maximum value, but feel free to test another value. For the angle use 90º.

Step 5

Double click on the blurry layer in order to open the Layer Styles dialog box. Select Gradient Overlay and Overlay for the Blend Mode. For the colors use the rainbow colors: start with violet, blue, green, yellow, and red. I think those are the colors )

Step 6

Using the Lasso Tool (L), set the feather option to 30px and create a random selection like I did. After that go to Layer>Layer Mask>Reveal Selection.

Conclusion

This is a very simple but cool effect. You can use it for website headers, CD covers, and wherever you want - I’ve just created a beautiful wallpaper for my blog. Again, there are lots of ways to achieve the same result, maybe using other filters and settings. It’s all about playing with the tool. Additionally, if you are using the CS3 version of Photoshop you can use the Smart Filters to test different values and see the effects without worrying about losing the previous version.

Sample PSD

You can download the sample Photoshop file for this tutorial for $2.50 by clicking the button below. Your contribution will help support PSDTUTS and keep the great tutorials coming! ]]> http://www.cuttingedgetutorials.com/2008/02/20/reader-request-msnbc-style-effect/feed/ http://www.cuttingedgetutorials.com/2008/02/20/reader-request-msnbc-style-effect/ Lifting the Skirt on Zend Framework 1.5: Zend_Auth and the OpenId Adapter. http://feedproxy.google.com/~r/CuttingEdgeTutorials/~3/WcmRIZ9rZ_E/ http://www.cuttingedgetutorials.com/2008/02/19/lifting-the-skirt-on-zend-framework-15-zend_auth-and-the-openid-adapter/#comments Tue, 19 Feb 2008 14:56:26 +0000 admin http://devzone.zend.com/article/3141-Lifting-the-Skirt-on-Zend-Framework-1.5-Zend_Auth-and-the-OpenId-Adapter. Probably my one favorite aspects of Zend Framework is that you can pull pieces out and use them by themselves without having to build a complete MVC installation. Not that building out a complete installation is difficult but there are times when you just need a small piece, not the entire puzzle. Zend_Auth is one of those pieces that can be pulled out and used by itself. If you need authentication for an existing application Zend_Auth may just be the piece you are looking for.

]]> ]]> http://www.cuttingedgetutorials.com/2008/02/19/lifting-the-skirt-on-zend-framework-15-zend_auth-and-the-openid-adapter/feed/ http://www.cuttingedgetutorials.com/2008/02/19/lifting-the-skirt-on-zend-framework-15-zend_auth-and-the-openid-adapter/ Add latest RSS items to Wordpress Post http://feedproxy.google.com/~r/CuttingEdgeTutorials/~3/yzlWUypxO5U/ http://www.cuttingedgetutorials.com/2008/02/18/add-latest-rss-item-to-wordpress-post/#comments Tue, 19 Feb 2008 02:05:22 +0000 admin http://www.cuttingedgetutorials.com/2008/02/18/add-latest-rss-item-to-wordpress-post/ If you’re using Wordpress to build a website showcase (or in my case blog showcase), it’s nice to show the recent posts from that website in the showcase.

In this tutorial I’m going to show you how to do this, using the Wordpress Custom Fields feature and SimplePie.

Read more after the jump.

(more…)

]]> http://www.cuttingedgetutorials.com/2008/02/18/add-latest-rss-item-to-wordpress-post/feed/ http://www.cuttingedgetutorials.com/2008/02/18/add-latest-rss-item-to-wordpress-post/ Handy Web 2.0 Icons In Photoshop http://feedproxy.google.com/~r/CuttingEdgeTutorials/~3/Evki0OMmM-E/ http://www.cuttingedgetutorials.com/2008/02/11/handy-web-20-icons-in-photoshop/#comments Mon, 11 Feb 2008 19:02:45 +0000 admin http://psdtuts.com/interface-tutorials/handy-web-20-icons-in-photoshop/ ]]> ]]> http://www.cuttingedgetutorials.com/2008/02/11/handy-web-20-icons-in-photoshop/feed/ http://www.cuttingedgetutorials.com/2008/02/11/handy-web-20-icons-in-photoshop/