Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.
Hello! This is Ray Villalobos and welcome to View Source. In this episode, I'm going to show you how to create e-commerce links using PayPal buttons. So, if you're looking for an easy way to get paid, it's time to View Source. PayPal is a real easy way to accept credit card payments for your freelance project, donations, or any other type of e-commerce. Creating PayPal buttons is super simple. Once you understand the basics, there's a ton of options that'll let you create subscriptions, shopping carts and a lot more. But the first thing you'll need is a PayPal account, which you can get on their web site, just paypal.com and then sign in for a PayPal account.
Once you have an account, creating a button is as easy as creating a form. As a matter of fact, a PayPal button is nothing more than a form. So, let's look at the most basic code necessary to create a PayPal button. So, I have the most simplest type of PayPal payment, which is a donation, in this piece of code right here. We'll go ahead and paste it into our basic body tag, and you'll see that you'll get this Donate button. So, when you create this form you just create a regular form where the action field is the PayPal processor URL, which is this link right there.
We have added just a couple of input fields plus a submit button here. So, the first and most important type of field is the CMD field or the command field. This is how you tell PayPal what type of payment do you want to take. So, if you take a donation, the value of that field should be _donations. The next most important field is the business field. The business field is simply the link to the email you use when you signed up for PayPal. So, to send money to anybody else, you would just type their email address right here.
Finally, we need to be able to submit this donation, so you need to include an input type submit button, so that people can click on it. So, in here I've changed the values so that the button says Donate instead of the normal submit. So, if we go to this page and we click on the Donate button, you'll see that this will take you to the PayPal page where you can type in a purpose for the donation, a donation amount and update the total, and then go through the normal PayPal payment procedure, which allows you put in your credit card or if you have a PayPal account, you can type in your information right here.
You can add a number of other options to your PayPal buttons. So, let's take a look at some of those. We are back into this codesnippets file and you can see that I can add another input attribute called item_name. With the item_name I can tell people what it is that they're going to be donating to when they click on the button. So, I'll add that hidden field called item_name, I'll save this, and then I'll go back into my Donate button and I'll hit Donate, and this time when I go to PayPal it already says something right here under purpose. But a donate button might not be the most visual thing to use, because people might not be getting a good idea of what it is they are going to be donating to, so it would be nice to insert a photo instead of a submit button, and we could do that by changing the input field to an image input field.
So, we're going to go into codesnippets and I've already prepared a donate button right here. It's just a picture of a cat with donate to your local shelter. So, I'm going to go back into codesnippets and grab this next version right here, and the only difference between this version and the last is that it has an input type="image". Under the input type="image", I have a link to my image that I want to use. So, I'm going to copy that, go back into index.html, and replace this form with my button and now we can see that the photo shows up. The photo behaves like a button, so it's clickable onto the PayPal page.
So it works in exactly the same way, but we can use an image instead of using a button. Now, on occasion you'll want to be able to create a link instead of an image or instead of using a form. Because a form is not particularly convenient, you may want to create an area that has a photo and say a title and a description and make the entire thing clickable. In that case, you'll need to create a link and to create a link you can use a long URL that behaves exactly as a form. So, let's go into our codesnippets and grab this next version of our file, and you'll see that I have a link right here.
The link actually uses an image as the clickable part, so it's going to look exactly the same thing as our form that uses an image as the submit field, but all the information from this form has been transferred into a long URL. So, if you look at the code up here you can see that it has a link to the main PayPal processor. We use the same thing as the hyperlink reference of our anchor tag, but in addition to that we add a question mark to the end of our link, and then we pass it along the same elements that we use on the normal form.
So, instead of adding an input field type="hidden", cmd for the command. We just add the name and value paired, cmd=_donations, and then we use the & because we want to put the values in with ampersands in between, and then we use the next variable business= email@example.com&. Again, action=Donate, because that's the action that we want to perform, and then we can put in our item name. When we want to use spaces we use the plus signs, so Donate+to+your+local+shelter is there.
You can see that other than that this is a normal link, and the link just has an image. So, I'm going to copy this piece of code, go back into my index.html, and replace the form with an actual link. So, this looks exactly the same as the form element, but as you could see, we can change the image to just a regular text link, and put whatever we want between the anchor tags. This will still work and take you to the PayPal page, and use all the variables that we entered. Now, donation is the most basic type of PayPal transaction that you can make.
There are lots of other transactions that you can make, including selling something. So, for selling something, you would use a slightly different version of the form and we can add some additional variables. Like for example, the price of the item as well as a return variable of what we want to happen once the user finishes paying for the item on PayPal. So, that's what this version of the form does. We'll copy this, go back into the index.html file, we'll replace this. Let me go back here, and I have used another image as the submit button in this case to add this particular product that we have for sell on our site.
So things to note here, the command is different, it's no longer _donate, it's _xclick, which is how you sell things in PayPal, and we have two additional input fields; the amount input field and the return input field. There are a lot of other input fields that you can use. PayPal allows you to create all kinds of transactions, including subscriptions, recurring payments and even shopping carts. You can find out more about what you could do with PayPal by going to this page right here, I've created a special short URL that you can type.
This short URL will take you directly to this page where you can see all of the different options for the variable names, the types of values that the command field can have for example, the different types of variables for the different features, as well as every other type of input fields that you can add to enhance your form. So, for example, you can add the tax, the tax rate, the type of payment, the shipping weight, everything that you would need for a super e-commerce web site. So e-commerce doesn't have to be that hard, once you understand these PayPal variables you can create all sorts of e- commerce apps, that tie into the PayPal engine.
So, next you need to accept online payments, don't forget to View Source.
There are currently no FAQs about View Source.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.